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
Результат данного примера:
|