Здравствуйте! Это что-то вроде перевода вот этой статьи. Для немного про поддержку браузерами (начиная с версии): Chrome 4.0, Firefox 5.0, Opera 12.0, Internet Explorer 10.0, Safari 4.0.
Возможность CSS анимации была введена в Webkit в 2007 году. В 2009 году рабочий проект был написан и добавлен в стандарт W3C. В течение трех следующих лет его начали поддерживать Firefox, Internet Explorer и, наконец, Opera.
Для использования CSS анимации, сначала необходимо указать несколько ключевых кадров для анимации - это нужно для того, чтобы указать браузеру, что должен будет делать элемент в определенное время. Остальное браузер сделает сам.
Перейдем к коду. Радует здесь то, что кода совсем немного (не забудьте проставить префиксы как для ключевых кадров, так и для самих свойств):
@keyframes resize {
0% {
padding: 0;
}
50% {
padding: 0 20px;
background-color:rgba(255,0,0,0.2);
}
100% {
padding: 0 100px;
background-color:rgba(255,0,0,0.9);
}
}
#box {
animation-name: resize;
animation-duration: 1s;
animation-iteration-count: 4;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
Наведите курсор на объект, чтобы увидеть анимацию. Как видно, здесь количество итераций равно четырем. Вы можете сделать столько ключевых кадров, сколько вам нравится. Также можно создать бесконечную анимацию указав: animation-iteration-count: infinite. На этом все! Спасибо за внимание!