Анимация 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-direction	normal - выполняет анимацию от 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>