Safari и Chrome поддерживают альтернативное свойство – -webkit-animation-name, благодаря чему анимации становятся ещё более гибкими. Примечание: В IE9 и старше это свойство не работает, так что будьте внимательны! ?? Свойство animation-name задаёт имя ключевых кадров (@keyframes) для анимации. | Значение по умолчанию: | none | | Наследуется: | нет | | Версия: | CSS3 | | Синтаксис JavaScript: | object.style.animationName="mymove" | | Значение | Описание | | имя_keyframe | Указывает имя для @keyframes. | | none | Отсутствие анимации. | Пример htmlhead 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/headbody div class="primer"/div/body/html Результат данного примера выглядит так:
|