Браузеры Safari и Chrome радуют нас поддержкой альтернативного свойства "-webkit-animation-name". Важно знать: в IE9 и более ранних версиях это свойство, к сожалению, не работает. С помощью свойства animation-name вы можете задать имя для блока @keyframes - это простой и удобный способ управлять анимациями. | Значение по умолчанию: | none | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.animationName="mymove" | | Значение | Описание | | имя_keyframe | Задаёт конкретное имя для @keyframe. | | none | Означает, что анимация отключена или отсутствует. | Практический пример html head style type="text/css" div.primer { width: 100px; height: 100px; background: red; position: relative; animation-name: mymove; animation-duration: 3s; animation-iteration-count: infinite; /* Firefox */ -moz-animation-name: mymove; -moz-animation-duration: 3s; -moz-animation-iteration-count: infinite; /* Safari and Chrome */ -webkit-animation-name: mymove; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; } @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 Вот что получится в результате этого примера:
|