40. animation-fill-mode, animation-direction

CSS: `animation-fill-mode` и `animation-direction`

Иллюстрация к уроку В этом уроке мы рассмотрим свойства animation-fill-mode и animation-direction, которые позволяют контролировать поведение анимации до ее начала, после ее окончания и направление проигрывания. Они добавляют гибкости и позволяют создавать более сложные и интересные анимации.

`animation-fill-mode`: Заполнение состояния анимации

Свойство animation-fill-mode определяет, какие стили применяются к элементу до начала анимации и после ее завершения. Это особенно полезно, если вы хотите, чтобы элемент оставался в конечном состоянии анимации или возвращался в исходное состояние.

Возможные значения:

none (значение по умолчанию): Стили анимации не применяются ни до, ни после анимации. Элемент возвращается к своим исходным стилям.
forwards: Элемент сохраняет стили, определенные в последнем ключевом кадре (100%) после завершения анимации.
backwards: Элемент применяет стили, определенные в первом ключевом кадре (0%) до начала анимации. Если animation-delay положительное, элемент будет отображаться в этом состоянии, пока не начнется анимация.
both: Сочетает в себе поведение forwards и backwards. Элемент применяет стили из первого ключевого кадра до начала анимации и стили из последнего ключевого кадра после завершения анимации.

Пример:

<!DOCTYPE html>
<html>
<head>
<title>animation-fill-mode Example</title>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: move;
  animation-duration: 2s;
  animation-fill-mode: forwards; /* Сохраняет финальное состояние */
}

@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 200px;
    background-color: blue;
  }
}
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

В этом примере после завершения анимации красный квадрат переместится вправо и станет синим, и останется в этом состоянии.

`animation-direction`: Направление анимации

Свойство animation-direction определяет, в каком направлении проигрывается анимация.

Возможные значения:

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

Пример:

<!DOCTYPE html>
<html>
<head>
<title>animation-direction Example</title>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: move;
  animation-duration: 2s;
  animation-iteration-count: infinite; /* Бесконечное повторение */
  animation-direction: alternate; /* Чередование направления */
}

@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 200px;
  }
}
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

В этом примере красный квадрат будет двигаться вправо, затем влево, повторяясь бесконечно.

Жизненный пример

animation-fill-mode часто используется для создания плавных переходов при наведении курсора на элементы. Например, кнопка, меняющая цвет при наведении. animation-direction широко используется в индикаторах загрузки, где элемент циклично двигается вперед и назад, показывая процесс загрузки. В различных UI фреймворках (например, Material UI, Bootstrap) анимации с использованием этих свойств применяются для визуальной обратной связи при взаимодействии пользователя с элементами интерфейса. Также, их можно встретить на сайтах-портфолио для создания интересных эффектов при прокрутке страницы.

Ключевые моменты

animation-fill-mode управляет стилями до и после анимации.
animation-direction управляет направлением проигрывания анимации.
Комбинируя эти свойства, можно создавать сложные и интересные анимации.
animation-fill-mode: forwards часто используется, чтобы сохранить конечное состояние анимации.
animation-direction: alternate создает эффект “пинг-понга”.

40. animation-fill-mode, animation-direction

CSS: animation-fill-mode и animation-direction

animation-fill-mode: Заполнение состояния анимации

animation-direction: Направление анимации

Жизненный пример

Ключевые моменты

Интерактивный пример

CSS: `animation-fill-mode` и `animation-direction`

`animation-fill-mode`: Заполнение состояния анимации

`animation-direction`: Направление анимации