логотип PurpleSchool
логотип PurpleSchool

CSS animation-direction; Полное руководство по управлению направлением анимации

Автор

Дмитрий Нечаев

Свойство animation-direction в CSS позволяет контролировать, в каком направлении будет проигрываться анимация. Это полезно для создания более сложных и реалистичных анимационных эффектов. В этой статье мы подробно рассмотрим, как использовать animation-direction, и приведем примеры для лучшего понимания.

Основы animation-direction

Свойство animation-direction определяет, будет ли анимация воспроизводиться в прямом, обратном направлении или чередоваться между ними.

Варианты значения animation-direction

  • normal
    • Анимация воспроизводится в обычном направлении (по умолчанию).
  • reverse
    • Анимация воспроизводится в обратном направлении.
  • alternate
    • Анимация чередуется между обычным и обратным направлениями.
  • alternate-reverse
    • Анимация чередуется, начиная с обратного направления.

Синтаксис animation-direction

Синтаксис использования свойства animation-direction простой:

.element {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

Пример использования

Рассмотрим простой пример, где анимация воспроизводится в различных направлениях:

@keyframes example {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.normal-direction {
  animation-name: example;
  animation-duration: 2s;
  animation-direction: normal; /* Анимация в обычном направлении */
}

.reverse-direction {
  animation-name: example;
  animation-duration: 2s;
  animation-direction: reverse; /* Анимация в обратном направлении */
}

.alternate-direction {
  animation-name: example;
  animation-duration: 2s;
  animation-direction: alternate; /* Анимация чередуется между обычным и обратным направлениями */
}

.alternate-reverse-direction {
  animation-name: example;
  animation-duration: 2s;
  animation-direction: alternate-reverse; /* Анимация чередуется, начиная с обратного направления */
}

Подробное рассмотрение каждого значения

normal

Когда animation-direction установлено в normal, анимация выполняется от начального состояния к конечному и повторяется, если указано свойство animation-iteration-count.

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.normal-animation {
  animation-name: slide;
  animation-duration: 3s;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

reverse

Значение reverse заставляет анимацию начинаться с конечного состояния и двигаться к начальному.

.reverse-animation {
  animation-name: slide;
  animation-duration: 3s;
  animation-direction: reverse;
  animation-iteration-count: infinite;
}

alternate

При использовании alternate анимация чередуется между обычным и обратным направлениями. Это означает, что после завершения анимации в обычном направлении, она начнется сначала, но в обратном направлении.

.alternate-animation {
  animation-name: slide;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

alternate-reverse

Значение alternate-reverse похоже на alternate, но анимация начинается с обратного направления.

.alternate-reverse-animation {
  animation-name: slide;
  animation-duration: 3s;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
}

Практические примеры использования animation-direction

Пример с пульсирующей анимацией

Рассмотрим пример, где используется alternate для создания пульсирующего эффекта:

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

.pulse-alternate {
  animation-name: pulse;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

Пример с вращающейся анимацией

Создадим вращающуюся анимацию, которая будет чередоваться между обычным и обратным направлениями:

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate-alternate-reverse {
  animation-name: rotate;
  animation-duration: 4s;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
}

Советы и рекомендации

  1. Использование в комбинации с другими свойствами. Свойство animation-direction часто используется вместе с animation-iteration-count для создания сложных анимаций.

  2. Тестирование в разных браузерах. Убедитесь, что ваши анимации корректно работают в различных браузерах, поскольку поддержка CSS-анимаций может отличаться.

  3. Умеренность. Избегайте чрезмерного использования анимаций, чтобы не перегружать пользователей и не снижать производительность сайта.

Заключение

Свойство animation-direction в CSS является мощным инструментом, позволяющим разработчикам контролировать направление воспроизведения анимаций. Используя различные значения этого свойства, можно создавать более сложные и реалистичные анимационные эффекты. Надеемся, что это руководство помогло вам лучше понять, как использовать animation-direction в ваших проектах.

Стрелочка влевоCSS animation-duration; Полное руководство по управлению длительностью анимацииCSS animation-delay; Полное руководство с примерамиСтрелочка вправо

Все гайды по Css

Полное руководство по использованию свойства will-change в CSSПолное руководство по свойству transform-style в CSSУправление точкой опоры трансформаций в CSS с помощью transform-originИспользование функций CSS-трансформации; Полное руководствоПолное руководство по свойству transform-box в CSSУправление элементами с помощью свойства transform в CSSПолное руководство по свойству perspective-origin в CSSПолное руководство по свойству perspective в CSSПолное руководство по свойству backface-visibility в CSS
Универсальный селектор в CSS. Полное руководство с примерамиСелектор по тегу в CSS. Полное руководство с примерамиПеречисление селекторов в CSS. Полное руководство с примерамиСелектор потомка в CSS. Полное руководство с примерамиСелектор по идентификатору в CSS; Полное руководство с примерамиКомбинированные селекторы в CSS; Полное руководство с примерамиСелектор по классу в CSS; Полное руководство с примерамиСелектор по атрибуту в CSS; Полное руководство с примерами
Псевдокласс selection. Полное руководство с примерамиПсевдоэлементы в CSS. Полное руководство с примерамиПсевдоэлемент placeholder в CSS. Полное руководство с примерамиПсевдоэлемент marker в CSS. Полное руководство с примерамиПсевдоэлемент first-line в CSS. Полное руководство с примерамиПсевдоэлемент first-letter в CSS. Полное руководство с примерамиСвойство content в CSS. Полное руководство с примерамиПсевдоэлемент before в CSS. Полное руководство с примерамиПсевдоэлемент backdrop в CSS. Полное руководство с примерамиПсевдоэлемент after в CSS. Полное руководство с примерами
Псевдокласс where в CSS. Полное руководство с примерамиПсевдокласс visited в CSS. Полное руководство с примерамиПсевдоклассы группы type в CSS. Полное руководство с примерамиПсевдокласс target в CSS. Полное руководство с примерамиПсевдокласс root в CSS. Полное руководство с примерамиПсевдокласс required в CSS. Полное руководство с примерамиПсевдоклассы в CSS. Полное руководство с примерамиПсевдокласс placeholder-shown в CSS. Полное руководство с примерамиПсевдокласс optional в CSS. Полное руководство с примерамиПсевдокласс not в CSS. Полное руководство с примерамиПсевдокласс link в CSS. Полное руководство с примерамиПсевдокласс lang в CSS. Полное руководство с примерамиПсевдокласс is в CSS. Полное руководство с примерамиПсевдоклассы invalid и valid в CSS. Полное руководство с примерамиПсевдокласс indeterminate в CSS. Полное руководство с примерамиПсевдоклассы in-range и out-of-range. Полное руководство с примерамиПсевдокласс hover в CSS. Полное руководство с примерамиПсевдокласс has в CSS. Полное руководство с примерамиПсевдокласс focus-within в CSS. Полное руководство с примерамиПсевдокласс focus-visible в CSS. Полное руководство с примерамиПсевдокласс focus в CSS. Полное руководство с примерамиПсевдокласс empty в CSS. Полное руководство с примерамиПсевдоклассы disabled и enabled в CSS. Полное руководство с примерамиПсевдокласс default в CSS. Полное руководство с примерамиПсевдоклассы группы child в CSS. Полное руководство с примерамиПсевдокласс checked в CSS. Полное руководство с примерамиПсевдокласс active в CSS. Полное руководство с примерами
Функция var в CSS. Полное руководство с примерамиФункция url в CSS. Полное руководство с примерамиФункция repeating-radial-gradient в CSS. Полное руководство с примерамиФункция repeating-linear-gradient в CSS. Полное руководство с примерамиФункция repeating-conic-gradient в CSS. Полное руководство с примерамиФункция radial-gradient в CSS. Полное руководство с примерамиФункция min в CSS. Полное руководство с примерамиФункция max в CSS. Полное руководство с примерамиФункция linear-gradient в CSS. Полное руководство с примерамиФункция image-set в CSS. Полное руководство с примерамиФункции фильтров в CSS. Полное руководство с примерамиФункция conic-gradient в CSS. Полное руководство с примерамиФункция clamp в CSS. Полное руководство с примерамиФункция calc в CSS. Полное руководство с примерамиФункция attr в CSS. Полное руководство с примерами
Вендорные префиксы в CSS. Полное руководство с примерамиКонтекст наложения в CSS. Полное руководство с примерамиСпецифичность в CSS. Полное руководство с примерамиПодход «Pixel Perfect» в верстке сайтов. Полное руководство с примерамиНаследование в CSS. Полное руководство с примерамиCSS-правило. Полное руководство с примерамиКомментарии в CSS. Полное руководство с примерамиПринцип каскада в CSS. Полное руководство с примерамиБлочная модель в CSS. Полное руководство с примерамиСвойство all в CSS. Полное руководство с примерамиПодключение стилей к HTML. Полное руководство с примерами
Полное руководство по свойству will-change в CSSПолное руководство по transition-timing-function в CSSОсновы использования transition-property в CSS; управление плавными переходамиCSS transition-duration; Полное руководство по управлению продолжительностью переходовCSS transition-delay; Полное руководство по управлению задержкой переходовCSS transition; Полное руководство по созданию плавных переходовCSS @keyframes; Полное руководство по созданию анимацийCSS animation-timing-function; Полное руководство по управлению проигрыванием анимацийCSS animation-play-state; Полное руководство по управлению анимациямиCSS animation-name; Полное руководство по заданию имени анимацииCSS animation-iteration-count; Полное руководство по управлению количеством повторений анимацииCSS animation-fill-mode; Полное руководство по управлению состоянием элементов после анимацииCSS animation-duration; Полное руководство по управлению длительностью анимацииCSS animation-direction; Полное руководство по управлению направлением анимацииCSS animation-delay; Полное руководство с примерамиCSS-анимации; Полное руководство с примерами
Открыть базу знаний