Красива анімація текста на css3 - анімація тексту css

lt;ul class="Text-animation"gt;lt;ligt; lt;h3gt; Текст 1lt;/h3gt; lt;/ligt;lt;ligt; lt;h3gt; Текст 2lt;/h3gt; lt;/ligt;lt;ligt; lt;h3gt; Текст 3lt;/h3gt; lt;/ligt;lt;ligt; lt;h3gt; Текст 4lt;/h3gt; lt;/ligt;lt;ligt; lt;h3gt; Текст 5lt;/h3gt; lt;/ligt;lt;/ulgt;

.text-animation,.text-animation: after {position: fixed-width: 100%-height: 100%-top: 0px-left: 0px-z-index: 0-}.text-animation li{z-index: 1000-position: absolute-bottom: 295px-left: 0px-width: 100%-text-align: center-opacity: 0--webkit-animation: textAnimation 20s linear infinite 0s--moz-animation: textAnimation 20s linear infinite 0s--o-animation: textAnimation 20s linear infinite 0s--ms-animation: textAnimation 20s linear infinite 0s-animation: textAnimation 20s linear infinite 0s-}.text-animation li h3 {font-family: `Open Sans Condensed`, sans-serif-text-transform:uppercase-font-size: 240px-padding: 0-line-height: 200px-color:# 390-}.text-animation li: nth-child(2){-webkit-animation-delay: 4s--moz-animation-delay: 4s--o-animation-delay: 4s--ms-animation-delay: 4s-animation-delay: 4s-}.text-animation li: nth-child(3){-webkit-animation-delay: 8s--moz-animation-delay: 8s--o-animation-delay: 8s--ms-animation-delay: 8s-animation-delay: 8s-}.text-animation li: nth-child(4) {-webkit-animation-delay: 12s--moz-animation-delay: 12s--o-animation-delay: 12s--ms-animation-delay: 12s-animation-delay: 12s-}.text-animation li: nth-child(5) {-webkit-animation-delay: 16s--moz-animation-delay: 16s--o-animation-delay: 16s--ms-animation-delay: 16s-animation-delay: 16s-}.text-animation li: nth-child(6) {-webkit-animation-delay: 20s--moz-animation-delay: 20s--o-animation-delay: 20s--ms-animation-delay: 20s-animation-delay: 20s-}/ * Анімація тексту * /@ -webkit-keyframes textAnimation { 0% {opacity: 0--webkit-transform: translateY(200px)-}10% {opacity: 1--webkit-transform: translateY(0px)-}20% {opacity: 1--webkit-transform: scale(1)-}23% {opacity: 0}27% {opacity: 0--webkit-transform: scale(10)-}100% {opacity: 0}}@ -moz-keyframes textAnimation { 0% {opacity: 0--moz-transform: translateY(200px)-}10% {opacity: 1--moz-transform: translateY(0px)-}20% {opacity: 1--moz-transform: scale(1)-}23% {opacity: 0}27% {opacity: 0--moz-transform: scale(10)-}100% {opacity: 0}}@ -o-keyframes textAnimation { 0% {opacity: 0--o-transform: translateY(200px)-}10% {opacity: 1--o-transform: translateY(0px)-}20% {opacity: 1--o-transform: scale(1)-}23% {opacity: 0}27% {opacity: 0--o-transform: scale(10)-}100% {opacity: 0}}@ -ms-keyframes textAnimation { 0% {opacity: 0--ms-transform: translateY(200px)-}10% {opacity: 1--ms-transform: translateY(0px)-}20% {opacity: 1--ms-transform: scale(1)-}23% { opacity: 0 }27% {opacity: 0--webkit-transform: scale(10)-}100% { opacity: 0 }}@keyframes textAnimation { 0% {opacity: 0-transform: translateY(200px)-}10% {opacity: 1-transform: translateY(0px)-}20% {opacity: 1-transform: scale(1)-}23% { opacity: 0 }27% {opacity: 0-transform: scale(10)-}100% { opacity: 0 }}

.text-animation,.text-animation: after {position: fixed-width: 100%-height: 100%-top: 0px-left: 0px-z-index: 0-}.text-animation li{z-index: 1000-position: absolute-bottom: 300px-left: 0px-width: 100%-text-align: center-opacity: 0--webkit-animation: textAnimation 20s linear infinite 0s--moz-animation: textAnimation 20s linear infinite 0s--o-animation: textAnimation 20s linear infinite 0s--ms-animation: textAnimation 20s linear infinite 0s-animation: textAnimation 20s linear infinite 0s-}.text-animation li h3 {font-family: `Open Sans Condensed`, sans-serif-text-transform:uppercase-font-size: 240px-padding: 0 30px-line-height: 120px-color:# F00-}.text-animation li: nth-child(2){-webkit-animation-delay: 4s--moz-animation-delay: 4s--o-animation-delay: 4s--ms-animation-delay: 4s-animation-delay: 4s-}.text-animation li: nth-child(3){-webkit-animation-delay: 8s--moz-animation-delay: 8s--o-animation-delay: 8s--ms-animation-delay: 8s-animation-delay: 8s-}.text-animation li: nth-child(4){-webkit-animation-delay: 12s--moz-animation-delay: 12s--o-animation-delay: 12s--ms-animation-delay: 12s-animation-delay: 12s-}.text-animation li: nth-child(5){-webkit-animation-delay: 16s--moz-animation-delay: 16s--o-animation-delay: 16s--ms-animation-delay: 16s-animation-delay: 16s-}.text-animation li: nth-child(6){-webkit-animation-delay: 20s--moz-animation-delay: 20s--o-animation-delay: 20s--ms-animation-delay: 20s-animation-delay: 20s-}@ -webkit-keyframes textAnimation { 0% {opacity: 0--webkit-transform: translateY(-200%)-}10% {opacity: 1--webkit-transform: translateY(0%)-}20% {opacity: 1--webkit-transform: translateY(0%)-}23% {opacity: 0--webkit-transform: translateY(100%)-}26% { opacity: 0 }100% { opacity: 0 }}@ -moz-keyframes textAnimation { 0% {opacity: 0--moz-transform: translateY(-200%)-}10% {opacity: 1--moz-transform: translateY(0%)-}20% {opacity: 1--moz-transform: translateY(0%)-}23% {opacity: 0--moz-transform: translateY(100%)-}26% { opacity: 0 }100% { opacity: 0 }}@ -o-keyframes textAnimation { 0% {opacity: 0--o-transform: translateY(-200%)-}10% {opacity: 1--o-transform: translateY(0%)-}20% {opacity: 1--o-transform: translateY(0%)-}23% {opacity: 0--o-transform: translateY(100%)-}26% { opacity: 0 }100% { opacity: 0 }}@ -ms-keyframes textAnimation { 0% {opacity: 0--ms-transform: translateY(-200%)-}10% {opacity: 1--ms-transform: translateY(0%)-}20% {opacity: 1--ms-transform: translateY(0%)-}23% {opacity: 0--ms-transform: translateY(100%)-}26% { opacity: 0 }100% { opacity: 0 }}@keyframes textAnimation { 0% {opacity: 0-transform: translateY(-200%)-}10% {opacity: 1-transform: translateY(0%)-}20% {opacity: 1-transform: translateY(0%)-}23% {opacity: 0-transform: translateY(100%)-}26% { opacity: 0 }100% { opacity: 0 }}

.text-animation,.text-animation: after {position: fixed-width: 100%-height: 100%-top: 0px-left: 0px-z-index: 0-}.text-animation li{z-index: 1000-position: absolute-bottom: 300px-left: 0px-width: 100%-text-align: right-opacity: 0--webkit-animation: textAnimation 20s linear infinite 0s--moz-animation: textAnimation 20s linear infinite 0s--o-animation: textAnimation 20s linear infinite 0s--ms-animation: textAnimation 20s linear infinite 0s-animation: textAnimation 20s linear infinite 0s-list-style-type:none-}.text-animation li h3 {font-family: `Open Sans Condensed`, sans-serif-text-transform:uppercase-font-size: 240px-padding: 0 400px-line-height: 120px-color:# F90-}.text-animation li: nth-child(2){-webkit-animation-delay: 4s--moz-animation-delay: 4s--o-animation-delay: 4s--ms-animation-delay: 4s-animation-delay: 4s-}.text-animation li: nth-child(3){-webkit-animation-delay: 8s--moz-animation-delay: 8s--o-animation-delay: 8s--ms-animation-delay: 8s-animation-delay: 8s-}.text-animation li: nth-child(4){-webkit-animation-delay: 12s--moz-animation-delay: 12s--o-animation-delay: 12s--ms-animation-delay: 12s-animation-delay: 12s-}.text-animation li: nth-child(5){-webkit-animation-delay: 16s--moz-animation-delay: 16s--o-animation-delay: 16s--ms-animation-delay: 16s-animation-delay: 16s-}.text-animation li: nth-child(6){-webkit-animation-delay: 20s--moz-animation-delay: 20s--o-animation-delay: 20s--ms-animation-delay: 20s-animation-delay: 20s-}@ -webkit-keyframes textAnimation { 0% {opacity: 0--webkit-transform: translateX(200px)-Поділися в соц мережах: 
Cхоже
Гарний ефект при завантаженні новин
Анімація при завантаженні на css3
Приголомшливий анімований 3d текст
Створення ефекту записки за допомогою css3
Ефект 3d кнопки на css3 використовуючи 3d transform
Приклад css анімації - пожвавлюємо міккі мауса
Приголомшлива анімація на лендінгем за допомогою плагіна tweenmax
Оформлення спливаючих підказок - спливаючі підказки css
Цікаве вертикальне меню на css3
Красиве повідомлення на css3
Новорічна анімована шапка на css3
Оригінальний ефект css3 при наведенні на
Слайд-шоу у вигляді мозаїки
3D перетворення і анімація css - урок 1. Обертання
3D перетворення і анімація css - урок 3. Обертається куб
Ефект анімації завантаження сторінки на чистому css
Нескладна підказка на css
Розсувний слайдер тільки на css3
Анімовані кнопки на css3
3D перетворення і анімація css - урок 2. Карусель новин

Увага, тільки СЬОГОДНІ!