тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Свойство 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, представляющие собой анимацию по наведению на элемент