СSS Свойство animation
Пример
Привязка анимации к элементу <div>, используя свойство стенографии:
div
{
animation: mymove 5s infinite;
}
Попробовать »
Определение и использование
Свойство animation сокращенное свойство для:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Примечание: Всегда указывайте свойство animation-duration, в противном случае длительность равна 0, и никогда не будет воспроизводиться.
| Значение по умолчанию: | нет 0 удобство 0 1 нормально не работает |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Читайте об animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.animation="mymove 5s infinite" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следуют -webkit-, -moz-, или -o- указывают первую версию, которая работает с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS синтаксис
animation: имя длительности - timing-function, задержка - iteration-count, направление - fill-mode, play-state;
Значение свойств
| Значение | Описание |
|---|---|
| animation-name | Задает имя ключевого кадра, который требуется привязать к селектору |
| animation-duration | Указывает, сколько секунд или миллисекунд требуется для завершения анимации |
| animation-timing-function | Задает линию скорости анимации |
| animation-delay | Задает задержку перед запуском анимации |
| animation-iteration-count | Указывает, сколько раз должна воспроизводиться анимация |
| animation-direction | Указывает, должна ли анимация воспроизводиться в обратном порядке на альтернативных циклах |
| animation-fill-mode | Указывает, какие значения применяются анимацией вне времени ее выполнения |
| animation-play-state | Указывает, выполняется ли анимация или приостановлена |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте об initial |
| inherit | Наследует это свойство от родительского элемента. Читайте об inherit |
Связанные сраницы
CSS учебник: CSS Анимации
HTML DOM справочник: Свойство animation
