Опубликовано Webmaster - чт, 13.06.2013 - 22:47

WebKit теперь поддерживает явные анимации в CSS. В качестве аналога переходов, анимации предоставляют возможность объявления повторяя анимационные эффекты, при помощи ключевых кадров, полностью в CSS.

Подвижный блок лево-право

Подвижная область будет передвигаться с лева на право и обратно (Повторений всего 10, скорость 2 сек.)

Указав анимации легко. Вы сначала должны описать  эффект анимации с помощью @-webkit-keyframes-правило.

@-webkit-keyframes bounce {
 from {
   left: 0px;
 }
 to {
   left: 200px;
 }
}

Как только мы определили, анимации, мы применяем его с помощью -webkit-animation-name и назначаем соответствующие свойства.

div {
 -webkit-animation-name: bounce;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
}

Пульсирующий блок

В этом случае мы указываем анимации с несколько кадров с разными значениями прозрачность, цвет фона и преобразования.