Позволяет установить несколько или все значения свойств анимации в одном объявлении.
Свойство animation является краткой формой записи восьми свойств анимации:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Примечание: Следует всегда указывать значение для свойства animation-duration, если его не указать это будет означать, что продолжительность равна нулю и анимация не будет воспроизводиться.
CSS синтаксис
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
Возможные значения
| Значение | Описание |
|---|---|
| animation-name | Указывает имя набора ключевых кадров @keyframes. |
| animation-duration | Определяет сколько секунд или миллисекунд понадобится, чтобы закончить 1 цикл анимации. |
| animation-timing-function | Определяет кривую скорости для анимации. |
| animation-delay | Определяет задержку анимации. |
| animation-iteration-count | Определяет сколько раз проигрывать анимацию. |
| animation-direction | Определяет будет ли анимация проигрываться в обратном направлении на альтернативных циклах. |
| animation-fill-mode | Определяет стиль для элемента, когда анимация не проигрывается (до её запуска, во время остановки или после её окончания). |
| animation-play-state | Определяет будет ли анимация проигрываться или будет оставаться в режиме паузы. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Подключаем анимацию к элементу <div> при помощи универсального свойства
div {
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
