Свойство animation
Пример style.animation
Изменение анимации элемента <div> с помощью сокращенного свойства:
document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
Попробуйте сами »
Описание animation
Свойство animation — это сокращенное обозначение шести свойств анимации:
animationName
animationDuration
animationTimingFunction
animationDelay
animationIterationCount
animationDirection
Примечание: Всегда указывайте свойство animationDuration, в противном случае длительность будет равна 0 и никогда не будет воспроизведена.
Синтаксис animation
Верните свойство animation:
object.style.animation
Установите свойство animation:
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
Значение свойства animation
| Значение | Описание |
|---|---|
| animationName | Указывает имя ключевого кадра, который вы хотите привязать к селектору. |
| animationDuration | Указывает, сколько секунд или миллисекунд требуется для завершения анимации. |
| animationTimingFunction | Задает кривую скорости анимации. |
| animationDelay | Указывает задержку перед началом анимации. |
| animationIterationCount | Указывает, сколько раз должна воспроизводиться анимация. |
| animationDirection | Указывает, должна ли анимация воспроизводиться в обратном порядке в альтернативных циклах. |
| animationFillMode | Указывает, какие значения применяются анимацией вне времени ее выполнения. |
| animationPlayState | Указывает, запущена ли анимация или приостановлена. |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство от родительского элемента. Читайте о inherit |
Технические детали animation
| Значение по умолчанию: | none 0 ease 0 1 normal none running |
|---|---|
| Возвращаемое значение: | Строка, представляющая свойство анимации элемента. |
| CSS Версия | CSS3 |
Поддержка animation
style.animation функция CSS3 (1999).
Полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 11 |
Связанные страницы animation
CSS Справочник: Свойство animation