Анимация CSS

Движущиеся элементы фокусирует на себе внимание, так, кнопка с меняющимся цветом позволила увеличить CTR. IE10, Chrome, Safari, Firefox поддерживают свойство animation с помощью префиксов, хотя то, что можно увидеть в одном браузере, не всегда будет работать в другом. Например, -webkit-animation в псевдоэлементах на данный момент не работает.

2+2*2=6
<style type="text/css">
.primer {font-size: 3.5em; position: relative;}

.primer:after {
  content: "?";
  color:rgba( 255, 0, 0, 0);
  position: absolute; right: -25px; top: -7px;
  -moz-animation: otvet 8s forwards;
  -webkit-animation: otvet 8s forwards;
  -ms-animation: otvet 8s forwards;
}
.primer:before {
  content: "8   \2639";
  position: absolute; right: -80px; top: -7px;
  color:rgba( 255, 0, 0, 0);
  -moz-animation: vosem 8s 8s forwards;
  -webkit-animation: vosem 8s 8s forwards;
  -ms-animation: vosem 8s 8s forwards;
}

.shest {
  position: relative;
  font-size: 3.5em;
  color:rgba( 0, 255, 0, 0);
  -moz-animation: shest 1s 16s forwards;
  -webkit-animation: shest 1s 16s forwards;
  -ms-animation: shest 1s 16s forwards;
}

.shest:after {
  position: absolute; right: -50px; top: -10px;
  content: " \263a";
}

@-moz-keyframes otvet { 
0% { color:rgba( 255, 255, 0, 1); } 
30% { color:rgba( 216, 0, 255, 1);}
60% { color:rgba( 255, 255, 0, 1); }
100% { color:rgba( 255, 255, 0, 0);} }   

@-moz-keyframes vosem { 
from { color:rgba( 255, 0, 0, 1); }
to { color:rgba( 255, 0, 0, 0); } }   

@-moz-keyframes shest { 0%, 100% { color:rgba( 0, 255, 0, 1); }}

@-webkit-keyframes otvet { 
0%, 60% { color:rgba( 255, 255, 0, 1); } /* объединяем две строки см. @-moz-keyframes otvet */ 
30% { color:rgba( 216, 0, 255, 1);}
100% { color:rgba( 255, 255, 0, 0);} }   

@-webkit-keyframes vosem {  /* ключевые кадры с именем vosem */ 
from { color:rgba( 255, 0, 0, 1); }  /* начальный кадр */  
to { color:rgba( 255, 0, 0, 0); } }   /* конечный кадр */     

@-webkit-keyframes shest { 0%, 100% { color:rgba( 0, 255, 0, 1); }}

@-ms-keyframes otvet { 
0%, 60% { color:rgba( 255, 255, 0, 1); }
30% { color:rgba( 216, 0, 255, 1);}
100% { color:rgba( 255, 255, 0, 0);} }   

@-ms-keyframes vosem { 
from { color:rgba( 255, 0, 0, 1); }
to { color:rgba( 255, 0, 0, 0); } }   

@-ms-keyframes shest { 0%, 100% { color:rgba( 0, 255, 0, 1); }}

</style>

<span class="primer">2+2*2=</span><span class="shest">6</span>

Список свойств, которые будут изменены, задаём в @keyframes. Помимо начального и конечного кадров, можно прописать промежуточные шаги с помощью процентов.

Три варианта равнозначны

@keyframes shest {
  from { color:rgba( 0, 255, 0, 1); }
  to { color:rgba( 0, 255, 0, 1); }}

@keyframes shest {
  0% { color:rgba( 0, 255, 0, 1); }
  100% { color:rgba( 0, 255, 0, 1); }}

@keyframes shest { 0%, 100% { color:rgba( 0, 255, 0, 1); }}

Теперь рассмотрим свойство animation, которое выполняет @keyframes с определённым именем.

анимация CSS
<style type="text/css">
#blok1 {
  background-color: #808991;
  width: 500px;
  -moz-animation: animaciya 8s ease-in-out 2s infinite alternate;
  -webkit-animation: animaciya 8s ease-in-out 2s infinite alternate;
  -ms-animation: animaciya 8s ease-in-out 2s infinite alternate;}

#blok1:hover {
  -webkit-animation-play-state:paused;  /* пауза при наведении курсора */  
  -moz-animation-play-state:paused;
  -ms-animation-play-state:paused;}

@-moz-keyframes animaciya {   
  from {width: 500px; background-color: #808991;}  
  to {width: 400px; background-color: #D0D941;} 
}

@-webkit-keyframes animaciya {
  from {width: 500px; background-color: #808991;}
  to {width: 400px; background-color: #D0D941;}
}

@-ms-keyframes animaciya {
  from {width: 500px; background-color: #808991;}
  to {width: 400px; background-color: #D0D941;}
}
</style>

<div id="blok1">анимация CSS</div>

Строку

animation: animaciya 8s ease-in-out 2s infinite alternate;
можно записать по другому:
animation-name: animaciya; /* поддержка ключевых кадров с именем animaciya */ 
animation-duration: 8s; /* продолжительность растягивания 8 секунд */ 
animation-timing-function: ease-in-out; 
animation-delay: 2s; /* по истечении 2 секунд начинается растягивание */
animation-iteration-count: infinite; /* бесконечное повторение */ 
animation-direction: alternate; /* плавное перемещение туда-сюда */ 
свойство
[по умолчанию]
описание (наведите на прямоугольник)
animation-nameподдержка @keyframes с определённым именем
-
animation-durationпродолжительность цикла анимации
2s
8s
0
animation-timing-functionизменения промежуточных значений в течении цикла анимации (подробнее)
ease
animation-delayспустя какое время начинается анимация
0s
7s
0
animation-iteration-countсколько раз воспроизводится анимация (infinite - бесконечно)
3
infinite
1
animation-directionnormal - выполняет анимацию от from до to
alternate - выполняет анимацию от from до to, от to до from
normal
alternate
reverse
a-r
normal
animation-fill-modeпозиция после завершения анимации
none
forwards
backwards
both
none
animation-play-stateустанавливает паузу running | paused
running

Обязательно использование двух свойств: animation-name и animation-duration. К одному элементу может быть применено несколько анимаций через запятую.
animation-name: fall, fade, spin1;

Первое, что мне пришло на ум: смена текста, или ссылок, или изображений на CSS. Действо получается аналогично скрипту jQuery. Для полного счастья не хватает поддержки у @keyframes стилей display и content (подробнее).





<style type="text/css">
#smena {position: relative;font-size: 3.5em;font-weight: bold;}

#smena li {color:rgba( 0, 0, 0, 0); position: absolute; left: 0px; top: 0px;list-style: none;}

#smena li:nth-child(1), #smena li:nth-child(1) a {-moz-animation: raz 40s infinite;-webkit-animation: raz 40s infinite;-ms-animation: raz 40s infinite;}

#smena li:nth-child(2), #smena li:nth-child(2) a {-moz-animation: dva 40s infinite;-webkit-animation: dva 40s infinite;-ms-animation: dva 40s infinite;}

#smena li:nth-child(3), #smena li:nth-child(3) a {-moz-animation: tri 40s infinite;-webkit-animation: tri 40s infinite;-ms-animation: tri 40s infinite;}

#smena li:nth-child(4), #smena li:nth-child(4) a {-moz-animation: chetyre 40s infinite;-webkit-animation: chetyre 40s infinite;-ms-animation: chetyre 40s infinite;}

@-moz-keyframes raz { 
0%, 23% { color:rgba( 76, 98, 113, 0); visibility: visible; }
1%, 22% { color:rgba( 76, 98, 113, 1); }
24%, 100% { visibility: hidden; } }  

@-moz-keyframes dva { 
25%, 48% { color:rgba( 76, 98, 113, 0); visibility: visible; }
26%, 47% { color:rgba( 76, 98, 113, 1); }
0%, 24%, 49%, 100% { visibility: hidden; } }  

@-moz-keyframes tri { 
50%, 73% { color:rgba( 76, 98, 113, 0); visibility: visible; }
51%, 72% { color:rgba( 76, 98, 113, 1); }
0%, 49%, 74%, 100% { visibility: hidden; } }

@-moz-keyframes chetyre { 
75%, 100% { color:rgba( 76, 98, 113, 0); visibility: visible; }
76%, 99% { color:rgba( 76, 98, 113, 1); }
0%, 74% { visibility: hidden; } }   

@-webkit-keyframes raz { 
0%, 23% { color:rgba( 76, 98, 113, 0); visibility: visible; }
1%, 22% { color:rgba( 76, 98, 113, 1); }
24%, 100% { visibility: hidden; } }

@-webkit-keyframes dva { 
25%, 48% { color:rgba( 76, 98, 113, 0); visibility: visible; }
26%, 47% { color:rgba( 76, 98, 113, 1); }
0%, 24%, 49%, 100% { visibility: hidden; } }  

@-webkit-keyframes tri { 
50%, 73% { color:rgba( 76, 98, 113, 0); visibility: visible; }
51%, 72% { color:rgba( 76, 98, 113, 1); }
0%, 49%, 74%, 100% { visibility: hidden; } }

@-webkit-keyframes chetyre { 
75%, 100% { color:rgba( 76, 98, 113, 0); visibility: visible; }
76%, 99% { color:rgba( 76, 98, 113, 1); }
0%, 74% { visibility: hidden; } }   

@-ms-keyframes raz { 
0%, 23% { color:rgba( 76, 98, 113, 0); visibility: visible; }
1%, 22% { color:rgba( 76, 98, 113, 1); }
24%, 100% { visibility: hidden; } }

@-ms-keyframes dva { 
25%, 48% { color:rgba( 76, 98, 113, 0); visibility: visible; }
26%, 47% { color:rgba( 76, 98, 113, 1); }
0%, 24%, 49%, 100% { visibility: hidden; } }  

@-ms-keyframes tri { 
50%, 73% { color:rgba( 76, 98, 113, 0); visibility: visible; }
51%, 72% { color:rgba( 76, 98, 113, 1); }
0%, 49%, 74%, 100% { visibility: hidden; } }

@-ms-keyframes chetyre { 
75%, 100% { color:rgba( 76, 98, 113, 0); visibility: visible; }
76%, 99% { color:rgba( 76, 98, 113, 1); }
0%, 74% { visibility: hidden; } }
</style>

<ul id="smena">
<li><a href="#1">Раз</a></li>
<li><a href="#2">Два</a></li>
<li><a href="#3">Три</a></li>
<li><a href="#4">Четыре</a></li>
</ul>
Постепенно появляющийся текст
<style type="text/css">
@-moz-keyframes typing { from { width: 0; } }
@-moz-keyframes blink-caret { 50% { border-color: transparent; } }

@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

@-ms-keyframes typing { from { width: 0; } }
@-ms-keyframes blink-caret { 50% { border-color: transparent; } }

#steps { 
 font: bold 200% Consolas, Monaco, monospace;
 border-right: .1em solid;
 width: 16.5em; /* если ch не поддерживается */
 width: 30ch; /* ch - единица эквивалентна ширине символа моноширного шрифта () */
 display: inline-block;
 white-space: nowrap;
 overflow: hidden;
 -moz-animation: typing 20s steps(30, end), blink-caret .5s step-end infinite alternate;
 -webkit-animation: typing 20s steps(30, end), blink-caret .5s step-end infinite alternate;
 -ms-animation: typing 20s steps(30, end), blink-caret .5s step-end infinite alternate;
}
</style>

<a href="#" id="steps">Постепенно появляющийся текст</a>
Образец от www.cssplay.co.uk


пёс
мечты
мечеклюв
конь
мишки
тигры
<style type="text/css">
#holder {
  margin:50px auto;
  -webkit-perspective:600px;
  -moz-perspective:600px;
  text-indent: 0px;
}

.box {
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 200px;
  -webkit-animation: spin 20s infinite linear;
  -moz-animation: spin 20s infinite linear;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.box div {
  position: absolute;
  height: 200px;
  width: 200px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); 
  -webkit-animation:rotate 15s infinite linear;
  -moz-animation:rotate 15s infinite linear;
}

.box div img {width:200px; height:200px;
  border-radius:200px;
  -webkit-animation:rot 10s infinite linear;
  -moz-animation:rot 10s infinite linear;
  padding: 0;
}

.box div.side1 {
  background:rgba( 213, 62, 7, 0.8);
  -webkit-transform:translateZ(100px);
  -moz-transform:translateZ(100px);
}
.box div.side2 {
  background:rgba( 127, 255, 212, 0.8);
  -webkit-transform:rotateY(90deg) translateZ(100px);
  -moz-transform:rotateY(90deg) translateZ(100px);
}
.box div.side3 {
  background:rgba( 255, 219, 88, 0.8);
  -webkit-transform:rotateY(180deg) translateZ(100px);
  -moz-transform:rotateY(180deg) translateZ(100px);
}
.box div.side4 {
  background:rgba( 153, 17, 153, 0.8);
  -webkit-transform:rotateY(-90deg) translateZ(100px);
  -moz-transform:rotateY(-90deg) translateZ(100px);
}
.box div.side5 {
  background:rgba( 0, 71, 171, 0.8);
  -webkit-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
  -moz-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.box div.side6  {
  background:rgba( 0, 171, 147, 0.8);
  -webkit-transform:rotateX(90deg) translateZ(100px);
  -moz-transform:rotateX(90deg) translateZ(100px);
}

@-moz-keyframes spin {
  0% {-moz-transform: rotateX(0deg) rotateY(0deg);}
  100% {-moz-transform: rotateX(1080deg) rotateY(360deg);}
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotateX(0deg) rotateY(0deg);}
  100% {-webkit-transform: rotateX(1080deg) rotateY(360deg);}
}
@-moz-keyframes rot {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rot {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}

</style>

<div id="holder">
<div class="box">
<div class="side1"><img src="URL_изо" /></div>
<div class="side2"><img src="URL_изо" /></div>
<div class="side3"><img src="URL_изо" /></div>
<div class="side4"><img src="URL_изо" /></div>
<div class="side5"><img src="URL_изо" /></div>
<div class="side6"><img src="URL_изо" /></div>
</div>
</div>
Падающие снежинки от addyosmani.com
<style type="text/css">
#container{  
  width: 100%;
  height: 480px;  
  position: relative;
  background-color: #808991;  
  }

@-webkit-keyframes fade{
  0%   { opacity: 0; }
  10%  { opacity: 0.8; }
  100% { opacity: 0; }
}
@-webkit-keyframes fall{from {top: 10px;} to {top: 470px;}}

@-webkit-keyframes accumulate{
  from {height: 0px; opacity: 0}
  to {height: 20px; opacity: .75;}}
  
@-webkit-keyframes spin1{
  0%   { -webkit-transform: rotate(-180deg) translate(0px, 0px);}
  100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}
}

@-moz-keyframes fade{
  0%   { opacity: 0; }
  10%  { opacity: 0.8; }
  100% { opacity: 0; }
}
@-moz-keyframes fall{
  from {top: 10px;}
  to {top: 470px;}
}
@-moz-keyframes accumulate{
  from {height: 0px; opacity: 0}
  to {height: 20px; opacity: .75;}
}
@-moz-keyframes spin1{
  0%   { -moz-transform: rotate(-180deg) translate(0px, 0px);}
  100% { -moz-transform: rotate(180deg) translate(10px, 75px);}
}

#snow div {
  position: absolute;
  top: -40px;
  -webkit-animation-name: fall, fade, spin1;
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-direction: normal; 
  -webkit-animation-timing-function: ease-in;
  -moz-animation-name: fall, fade, spin1;
  -moz-animation-iteration-count: infinite; 
  -moz-animation-direction: normal; 
  -moz-animation-timing-function: ease-in;
}
.snowflake {
  color: #fff;
  font-size: 2em;
  position: absolute; 
}
.snowflake.f1 {
  left: 40px;
  -webkit-animation-duration: 5s; 
  -moz-animation-duration: 5s; 
}
.snowflake.f2 {
  font-size: 1.8em;
  left: 120px;
  -webkit-animation-duration: 7s; 
  -moz-animation-duration: 7s;
}
.snowflake.f3 {
  left: 200px;
  -webkit-animation-duration: 8s; 
  -moz-animation-duration: 8s;
}
.snowflake.f4 {
  font-size: 1.5em;
  left: 280px;
  -webkit-animation-duration: 6s; 
  -moz-animation-duration: 6s; 
}
#ground{ 
  background-color: #fff;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 20px;
  -webkit-animation-name: accumulate;
  -webkit-animation-duration: 60s;
  -moz-animation-name: accumulate;
  -moz-animation-duration: 60s;
}
</style>

<div id="container">
<div id="snow" class="snow">
<div class="snowflake f1">&#10053;</div>
<div class="snowflake f2">&#10052;</div>
<div class="snowflake f3">&#10053;</div>
<div class="snowflake f4">&#10052;</div>
</div>
<div id="ground"></div>
</div>
в f t
наверх ↑

20 комментариев:

Alex
Мне понравилось несколько вариантов css я кое-что взял для себя))
NMitra
Честно говоря, до сих пор не могу поверить, что могу сама составлять код, а не только "дёргать" материалы с других сайтов.)))
openid
похожие шутчки можно делать в фотоэдиторе http://www.lunapic.com/editor/ - просто и без кодов
Justus
NMitra, здравствуйте! Поставил у себя блок "анимация CSS", который расширяется, сжимается и меняет цвета. Все хорошо, большое спасибо! Только не знаю, как разместить его по центру? А то он у меня находится с лева, а расширяется только вправо. Как сделать, что бы он был по центру и расширялся в две стороны, как у вас?
NMitra
Для вашего блока:

margin: 0 auto;
text-align: center;
Justus
NMitra, огромное спасибо! Как вы наверное заметили по моему блогу, я являюсь последовательным вашим учеником! Многие ваши разработки, украсили мой блог!
NMitra
Приятно слышать)))
Тимофей Кравченко
а у меня боx неотоброжается и видны только фотки.
как это исправить?
NMitra
И ссылку на ваш образец :)
Анонимный
Приветствую. Подскажите пожалуйста можно ли на css сделать - чтобы выпадающее меню из разделов, при наведении - выпадало как бы постепенно, как "веер" (что-ли...). Имею ввиду плавно, но быстро. Вообщем чтобы как-бы разворачивалось вниз. Подскажите пожалуйста какими параметрами это делается (если это возможно на css).
NMitra
Можно, посмотрите тут много всяких вариантов http://www.cssplay.co.uk/menus/ и http://tympanus.net/codrops/?s=menu
Анонимный
Спасибо.
Анонимный
Класс!
Анонимный
Очень ценные советы! спасибо за ценную информацию)
Neon Rain
Здравствуйте, может подскажите как в данном случае на конец пульсации добавить бордер в 1px (тень в 1px без размытия) т е пульсирует круг а на конце этой пульсации окантовка в 1px другого цвета
http://jsfiddle.net/NeonRain/2oc22ab5/
NMitra
Здравствуйте, у вас уходит в просвечивающий фон, а когда один цвет перемешивается с другим получается третий.. Можно переходить в однотонный фон http://jsfiddle.net/NMitra/2oc22ab5/1/

@keyframes uptocall1 {
14%, 30%, 41% {box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff;}
19%, 35%, 46% {box-shadow: 0 0 0 0 #54e0fa, 0 0 0 1px red;}
29%, 40%, 51% {box-shadow:0 0 0 90px #fff, 0 0 0 91px #fff;}
}

Neon Rain
да оно, спасибо
Neon Rain
Подскажите, может вы знаете как в анимации CSS можно заставить объект резко исчезнуть и htprj появиться через секунду например? opacity дает только плавное появление/исчезновение, а команды display: block/none не работают в @keyframes, тут нужно добавлять jQuery или все же есть какой-то способ на CSS?
NMitra
"htprj" - для меня загадка что это

Есть свойство visibility (см. http://shpargalkablog.ru/2012/12/display-visibility-css.html )
Сделайте разницу в 1% (см. http://shpargalkablog.ru/2013/12/blink-text.html )
Neon Rain
Спасибо. htprj - это "резко" английскими)