Свойство animation
Свойство animation - это свойство
сокращение для анимации, позволяет задать
все свойства для анимации одновременно: animation-name,
animation-duration,
animation-delay,
animation-timing-function,
animation-iteration-count,
animation-direction,
animation-fill-mode,
animation-play-state.
Порядок значения не имеет, время выполнения
анимации animation-duration обязательно
должно стоять перед задержкой animation-delay.
Обязательными являются только свойства animation-name
и animation-duration.
Свойство может также принимать значение none,
которое отключает анимацию совсем. Данное
значение является значением по умолчанию.
Синтаксис
селектор {
animation: значения;
}
Пример
В данном примере перед анимацией будет задержка
в 3 секунды (перед каждым новым проигрыванием),
а затем анимация будет проигрываться в течении
6-ти секунд:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation: move 6s infinite 3s linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Пример . Возможные проблемы
Анимация, записанная в краткой форме, может не работать из-за своего названия. Давайте рассмотрим следующую анимацию:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
Заметьте, я использую название анимации reverse.
На первый взгляд, все хорошо, но aнимация
не работает, т.к. reverse - валидное
ключевое слово для свойства animation-direction.
Также анимация не будет работать при использовании в краткой форме в названии других ключевых слов. Но все работает хорошо при использовании "полной" формы описания.
К ключевым словам-значениям animation-direction,
ломающими анимации, стоит отнести и ключевые
слова, относящиеся к функциям сглаживания,
а так же infinite, alternate,
running, paused и так далее.
Смотрите также
-
команду
@keyframes,
задающую ключевые кадры анимации -
плавные переходы
transition, представляющие собой анимацию по наведению на элемент