Safari и Chrome поддерживают альтернативный синтаксис – «-webkit-animation», что делает анимацию более гибкой. Важно: в IE9 и более ранних версиях свойство не работает, так что будьте внимательны! Свойство animation позволяет задать сразу все параметры анимации: имя, длительность, тайминги, задержку, количество итераций и направление – всё в одном объявлении. Не забывайте указывать 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 | Определяет, будет ли каждый второй цикл идти в обратном направлении. |
Пример кода:htmlhead 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;} /stylebody div class="primer"/div
|