@keyframes peremennaya {
0% { left: 0; color:red; }
25% { left: 50; color:green; }
50% { top: 50; color:blue; }
75% { right: 50; color:grey; }
100% { bottom: 50; color:broun; }
}
#block{
width: 200px;
height: 100px;
background-color: red;
position: absolute;
animation: peremennaya 3s ease-in-out infinite;
}
animation: animation-duration || animation-timing-function ||
animation-delay || animation-iteration-count || animation-direction ||
animation-fill-mode || animation-play-state || [none | animation-name]
,animation-name: none /*@keyframes имя_анимации*/;
animation-duration: 0s/*сколько должен длиться один цикл анимации*/;
animation-timing-function: ease/*в каждый момент времени может быть разная скорость анимации*/;
animation-delay: 0s/*время ожидания перед запуском анимации*/;
animation-iteration-count: 1/*сколько раз проигрывать цикл анимации до её остановки*/;
animation-direction: normal/*направление анимации - с начала или с конца*/;
animation-fill-mode: none /*стиль элемента, когда анимация не проигрывается.*/;
animation-play-state: running /*проигрывать анимацию или поставить её на паузу*/;
Для каждого браузера используются свои свойства для animation:
Chrome, Safari и Android поддерживают свойство -webkit-animation.
Opera до версии 12.10 поддерживает свойство -o-animation.
Firefox до версии 16 поддерживает свойство -moz-animation.
@keyframes peremennaya {
0% { left: 0; color:red; }
25% { left: 50; color:green; }
50% { top: 50; color:blue; }
75% { right: 50; color:grey; }
100% { bottom: 50; color:broun; }
}
#block{
width: 200px;
height: 100px;
background-color: red;
position: absolute;
animation: peremennaya 3s ease-in-out infinite;
}
animation: animation-duration || animation-timing-function ||
animation-delay || animation-iteration-count || animation-direction ||
animation-fill-mode || animation-play-state || [none | animation-name]
,animation-name: none /*@keyframes имя_анимации*/;
animation-duration: 0s/*сколько должен длиться один цикл анимации*/;
animation-timing-function: ease/*в каждый момент времени может быть разная скорость анимации*/;
animation-delay: 0s/*время ожидания перед запуском анимации*/;
animation-iteration-count: 1/*сколько раз проигрывать цикл анимации до её остановки*/;
animation-direction: normal/*направление анимации - с начала или с конца*/;
animation-fill-mode: none /*стиль элемента, когда анимация не проигрывается.*/;
animation-play-state: running /*проигрывать анимацию или поставить её на паузу*/;
Для каждого браузера используются свои свойства для animation:
Chrome, Safari и Android поддерживают свойство -webkit-animation.
Opera до версии 12.10 поддерживает свойство -o-animation.
Firefox до версии 16 поддерживает свойство -moz-animation.