Свойство animation-fill-mode: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии заданий вы попрактикуетесь в использовании CSS-свойства `animation-fill-mode`. Это свойство определяет, какие стили будут применены к элементу до начала анимации и после её завершения. Вы будете изменять CSS-код, заполняя пропуски, чтобы увидеть, как разные значения (`none`, `forwards`, `backwards`, `both`) влияют на поведение анимированных элементов. Задания построены от простого к сложному, чтобы вы могли постепенно освоить все аспекты этого свойства.

Список тем

Оставить стили после анимации

Создана простая анимация, перемещающая квадрат справа налево. По умолчанию, после завершения анимации квадрат возвращается в исходное положение. Ваша задача — изменить CSS так, чтобы квадрат оставался в конечном положении (слева) после завершения анимации.

CSS

@keyframes move-right {
  from {
    transform: translateX(0);
    background-color: dodgerblue;
  }
  to {
    transform: translateX(150px);
    background-color: tomato;
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  position: relative;
  /* Параметры анимации */
  animation-name: move-right;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  /* Укажите режим заполнения, чтобы элемент остался в конечном состоянии */
  input1: forwards;
}

                     @keyframes move-right {
  from {
    transform: translateX(0);
    background-color: dodgerblue;
  }
  to {
    transform: translateX(150px);
    background-color: tomato;
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  position: relative;
  /* Параметры анимации */
  animation-name: move-right;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  /* Укажите режим заполнения, чтобы элемент остался в конечном состоянии */
  input1: forwards;
}

HTML

<div class="box"></div>

Чтобы элемент сохранил стили последнего кадра анимации после её завершения, используйте свойство `animation-fill-mode` со значением `forwards`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Применить стили до начала анимации

Квадрат должен начать анимацию через 2 секунды. Изначально он синий, но первый кадр анимации делает его оранжевым. Задача: сделать так, чтобы квадрат стал оранжевым сразу, еще до фактического начала движения (во время задержки).

CSS

@keyframes change-color {
  from {
    background-color: orange;
    transform: scale(1.1);
  }
  to {
    background-color: mediumpurple;
    transform: scale(1);
  }
}

.box {
  width: 60px;
  height: 60px;
  background-color: dodgerblue; /* Исходный цвет */
  margin-top: 20px;
  /* Параметры анимации */
  animation-name: change-color;
  animation-duration: 2s;
  animation-delay: 2s; /* Задержка перед стартом */
  /* Укажите режим заполнения, чтобы стили применились до старта */
  animation-fill-mode: input1;
}

                     @keyframes change-color {
  from {
    background-color: orange;
    transform: scale(1.1);
  }
  to {
    background-color: mediumpurple;
    transform: scale(1);
  }
}

.box {
  width: 60px;
  height: 60px;
  background-color: dodgerblue; /* Исходный цвет */
  margin-top: 20px;
  /* Параметры анимации */
  animation-name: change-color;
  animation-duration: 2s;
  animation-delay: 2s; /* Задержка перед стартом */
  /* Укажите режим заполнения, чтобы стили применились до старта */
  animation-fill-mode: input1;
}

HTML

<div class="box"></div>

Чтобы применить стили первого кадра анимации к элементу до её фактического начала (во время действия `animation-delay`), используйте свойство `animation-fill-mode` со значением `backwards`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Применить стили до и после анимации

Эта анимация с задержкой изменяет размер и цвет квадрата. Задача: сделать так, чтобы квадрат принял стили первого кадра (увеличенный размер) еще до начала анимации (во время задержки) и сохранил стили последнего кадра (фиолетовый цвет) после её завершения.

CSS

@keyframes resize-color {
  from {
    transform: scale(1.2);
    background-color: lightgreen;
  }
  to {
    transform: scale(1);
    background-color: mediumpurple;
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 30px;
  /* Параметры анимации */
  animation-name: resize-color;
  animation-duration: 2.5s;
  animation-delay: 1.5s;
  /* Укажите режим заполнения, чтобы стили применились до старта и сохранились после */
  animation-fill-mode: input1;
}

                     @keyframes resize-color {
  from {
    transform: scale(1.2);
    background-color: lightgreen;
  }
  to {
    transform: scale(1);
    background-color: mediumpurple;
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 30px;
  /* Параметры анимации */
  animation-name: resize-color;
  animation-duration: 2.5s;
  animation-delay: 1.5s;
  /* Укажите режим заполнения, чтобы стили применились до старта и сохранились после */
  animation-fill-mode: input1;
}

HTML

<div class="box"></div>

Чтобы применить стили первого кадра до начала анимации и сохранить стили последнего кадра после её завершения, используйте свойство `animation-fill-mode` со значением `both`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Режим 'none' (по умолчанию)

Квадрат анимируется, меняя цвет и положение. Сейчас он остается в конечном состоянии после анимации. Ваша задача — вернуть поведение по умолчанию, чтобы после завершения анимации квадрат возвращался к своим исходным стилям (до анимации).

CSS

@keyframes slide-fade {
  from {
    opacity: 1;
    transform: translateX(0);
    background-color: teal;
  }
  to {
    opacity: 0.5;
    transform: translateX(100px);
    background-color: gold;
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: teal;
  opacity: 1;
  margin-top: 20px;
  /* Параметры анимации */
  animation-name: slide-fade;
  animation-duration: 3s;
  /* Укажите режим заполнения, чтобы вернуть поведение по умолчанию */
  animation-fill-mode: input1;
}

                     @keyframes slide-fade {
  from {
    opacity: 1;
    transform: translateX(0);
    background-color: teal;
  }
  to {
    opacity: 0.5;
    transform: translateX(100px);
    background-color: gold;
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: teal;
  opacity: 1;
  margin-top: 20px;
  /* Параметры анимации */
  animation-name: slide-fade;
  animation-duration: 3s;
  /* Укажите режим заполнения, чтобы вернуть поведение по умолчанию */
  animation-fill-mode: input1;
}

HTML

<div class="box"></div>

Поведение по умолчанию для `animation-fill-mode` — это значение `none`. Оно означает, что стили анимации не применяются к элементу ни до её начала, ни после её завершения. Установите это значение явно.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Заполнение в краткой записи 'animation'

Анимация задана с помощью краткого свойства `animation`. Сейчас элемент возвращается в исходное состояние после анимации. Допишите в конец значения свойства `animation` нужный параметр, чтобы элемент оставался в конечном состоянии (как в первом задании).

CSS

@keyframes grow {
  from {
    transform: scale(0.5);
    border-radius: 50%;
  }
  to {
    transform: scale(1.5);
    border-radius: 0;
  }
}

.shape {
  width: 40px;
  height: 40px;
  background-color: crimson;
  margin: 50px;
  /* Допишите значение для fill-mode в конец */
  animation: grow 2s ease-out input1;
}

                     @keyframes grow {
  from {
    transform: scale(0.5);
    border-radius: 50%;
  }
  to {
    transform: scale(1.5);
    border-radius: 0;
  }
}

.shape {
  width: 40px;
  height: 40px;
  background-color: crimson;
  margin: 50px;
  /* Допишите значение для fill-mode в конец */
  animation: grow 2s ease-out input1;
}

HTML

<div class="shape"></div>

В краткой записи `animation` значение для `animation-fill-mode` можно указать вместе с другими параметрами. Добавьте значение `forwards` в конец строки.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Заполнение 'backwards' в краткой записи 'animation'

Используется краткая запись `animation` с задержкой. Элемент должен принять стили первого кадра (прозрачность 0.2) во время задержки, до начала анимации. Допишите нужное значение `animation-fill-mode` в строку `animation`.

CSS

@keyframes fade-in {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

.target {
  width: 80px;
  height: 80px;
  background-color: forestgreen;
  margin: 30px;
  opacity: 1; /* Изначальная непрозрачность */
  /* Добавьте значение fill-mode для применения стилей до старта */
  animation: fade-in 3s linear 2s input1;
  /*           name duration timing delay fill-mode */
}

                     @keyframes fade-in {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

.target {
  width: 80px;
  height: 80px;
  background-color: forestgreen;
  margin: 30px;
  opacity: 1; /* Изначальная непрозрачность */
  /* Добавьте значение fill-mode для применения стилей до старта */
  animation: fade-in 3s linear 2s input1;
  /*           name duration timing delay fill-mode */
}

HTML

<div class="target"></div>

Чтобы применить стили первого кадра до начала анимации (во время задержки) при использовании краткой записи `animation`, добавьте значение `backwards` в строку.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Влияние 'forwards' на 'animation-direction: alternate'

Анимация перемещает круг вправо и обратно (`animation-direction: alternate`) два раза (`animation-iteration-count: 2`). Задача: сделать так, чтобы после завершения всех циклов анимации (вперед-назад, вперед-назад) круг остался в конечном положении *прямого* направления анимации (справа).

CSS

@keyframes move-side {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(120px);
  }
}

.circle {
  width: 40px;
  height: 40px;
  background-color: orangered;
  border-radius: 50%;
  margin-top: 40px;
  /* Параметры анимации */
  animation-name: move-side;
  animation-duration: 1.5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  /* Укажите режим заполнения, чтобы элемент остался в положении 'to' */
  input1: input2;
}

                     @keyframes move-side {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(120px);
  }
}

.circle {
  width: 40px;
  height: 40px;
  background-color: orangered;
  border-radius: 50%;
  margin-top: 40px;
  /* Параметры анимации */
  animation-name: move-side;
  animation-duration: 1.5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  /* Укажите режим заполнения, чтобы элемент остался в положении 'to' */
  input1: input2;
}

HTML

<div class="circle"></div>

Даже при `animation-direction: alternate` или `reverse`, значение `forwards` для `animation-fill-mode` заставляет элемент сохранять стили, определенные в `100%` или `to` кейфрейме после завершения *последней* итерации анимации.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку