Браузеры Safari и Chrome предлагают использовать альтернативный вариант с префиксом: "-webkit-animation".
Важно знать: к сожалению, эта функция не работает в IE9 и более старых версиях браузеров.
Свойство animation - это настоящий «швейцарский нож» для CSS! Оно позволяет компактно прописать сразу несколько параметров или все значения свойств анимации в одном объявлении. Удобно, правда?
Вы можете объединять следующие характеристики: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count и animation-direction.
Обратите внимание: всегда обязательно указывайте animation-duration. Если вы пропустите этот параметр, продолжительность по умолчанию станет 0, и анимация просто не запустится. Это частая причина, почему код «молчит»!
| Значение по умолчанию: | none 0 ease 0 1 normal |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.animation="mymove 5s infinite" |
| Значение | Описание |
| animation-name | Устанавливает имя для блока @keyframes. |
| animation-duration | Определяет длительность одного цикла анимации (в секундах или миллисекундах). |
| animation-timing-function | Задаёт кривую скорости изменения анимации. |
| animation-delay | Определяет задержку перед началом проигрывания. |
| animation-iteration-count | Указывает количество повторений анимации. |
| animation-direction | Определяет, будет ли анимация играть в обратном направлении на нечетных или четных циклах. |
Пример использования: html head style type="text/css" div.primer { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; -moz-animation: mymove 5s infinite; /*Firefox*/ -webkit-animation: mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from { left:0px; } to { left:540px; } } @-moz-keyframes mymove /*Firefox*/{ from { left:0px; } to { left:540px; } } @-webkit-keyframes mymove /*Safari and Chrome*/{ from { left:0px; } to { left:540px; } } /style /head body div class="primer"/div /body /html