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

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

В этой серии упражнений вы попрактикуетесь в использовании свойства `animation-timing-function`. Это свойство определяет кривую скорости анимации, то есть как она будет ускоряться и замедляться в течение своего цикла. Вам будут предложены HTML и CSS код, где вам нужно будет заполнить пропуски, связанные с различными значениями `animation-timing-function`, чтобы добиться нужного эффекта. Задания построены от простого к сложному, начиная с базовых значений, таких как `linear` и `ease`, и заканчивая функцией `steps()`.

Список тем

Плавное начало и конец: ease

Создайте анимацию для квадрата, которая будет плавно начинаться, ускоряться в середине и плавно заканчиваться. Это поведение по умолчанию для большинства анимаций. Вам нужно указать соответствующее значение для свойства `animation-timing-function`.

CSS

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для плавного старта и финиша */
  animation-timing-function: input1;
}

                     @keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для плавного старта и финиша */
  animation-timing-function: input1;
}

HTML

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

Используйте значение `ease` для свойства `animation-timing-function`. Это значение задает анимации медленное начало, затем ускорение и медленное завершение. Это значение используется по умолчанию, если `animation-timing-function` не указано.

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

Результат

Сообщения

Выполнить

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

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

Равномерная скорость: linear

Заставьте квадрат двигаться с постоянной, равномерной скоростью от начала до конца анимации. Не должно быть никаких ускорений или замедлений. Впишите правильное значение для `animation-timing-function`.

CSS

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для равномерной скорости */
  animation-timing-function: input1;
}

                     @keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для равномерной скорости */
  animation-timing-function: input1;
}

HTML

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

Для равномерного движения без ускорений и замедлений используйте значение `linear` в свойстве `animation-timing-function`.

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

Результат

Сообщения

Выполнить

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

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

Медленное начало: ease-in

Настройте анимацию так, чтобы квадрат начинал движение медленно, а затем ускорялся к концу анимации. Заполните пропуск соответствующим значением `animation-timing-function`.

CSS

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #f1c40f;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для медленного старта */
  animation-timing-function: input1;
}

                     @keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #f1c40f;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для медленного старта */
  animation-timing-function: input1;
}

HTML

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

Используйте значение `ease-in`. Эта функция времени задает анимации медленное начало и постепенное ускорение до конца.

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

Результат

Сообщения

Выполнить

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

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

Медленный конец: ease-out

Сделайте так, чтобы квадрат начинал движение быстро, а затем замедлялся к концу анимации. Впишите необходимое значение для `animation-timing-function`.

CSS

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #2ecc71;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для медленного финиша */
  animation-timing-function: input1;
}

                     @keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #2ecc71;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для медленного финиша */
  animation-timing-function: input1;
}

HTML

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

Примените значение `ease-out`. Эта функция времени обеспечивает быстрый старт анимации с последующим замедлением к её завершению.

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

Результат

Сообщения

Выполнить

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

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

Медленное начало и конец: ease-in-out

Настройте анимацию квадрата так, чтобы она имела медленное начало и медленное завершение, подобно `ease`, но с более выраженным эффектом замедления/ускорения по краям. Заполните пропуск нужным значением.

CSS

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #9b59b6;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для медленного старта и финиша */
  animation-timing-function: input1;
}

                     @keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #9b59b6;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для медленного старта и финиша */
  animation-timing-function: input1;
}

HTML

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

Используйте значение `ease-in-out`. Эта функция времени похожа на `ease`, но обеспечивает более симметричное и заметное замедление в начале и в конце анимации.

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

Результат

Сообщения

Выполнить

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

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

Пошаговая анимация: step-start

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

CSS

@keyframes jumpRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(150px);
  }
}

.icon {
  width: 64px; 
  height: 64px;
  animation-name: jumpRight;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для мгновенного перехода в начале */
  animation-timing-function: input1;
}

                     @keyframes jumpRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(150px);
  }
}

.icon {
  width: 64px; 
  height: 64px;
  animation-name: jumpRight;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для мгновенного перехода в начале */
  animation-timing-function: input1;
}

HTML

<img src="https://naytikurs.ru/img/1.png" class="icon" alt="icon">

Используйте значение `step-start`. Это эквивалентно `steps(1, start)`. Анимация переходит в конечное состояние сразу в начале.

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

Результат

Сообщения

Выполнить

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

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

Пошаговая анимация: step-end

Заставьте изображение оставаться в начальном положении на протяжении всей анимации и перемещаться в конечное положение только в самом конце цикла анимации.

CSS

@keyframes jumpRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(150px);
  }
}

.icon {
  width: 64px; 
  height: 64px;
  animation-name: jumpRight;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для мгновенного перехода в конце */
  animation-timing-function: input1;
}

                     @keyframes jumpRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(150px);
  }
}

.icon {
  width: 64px; 
  height: 64px;
  animation-name: jumpRight;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени для мгновенного перехода в конце */
  animation-timing-function: input1;
}

HTML

<img src="https://naytikurs.ru/img/2.png" class="icon" alt="icon">

Используйте значение `step-end`. Это эквивалентно `steps(1, end)`. Анимация сохраняет начальное состояние до самого конца цикла, а затем мгновенно переходит в конечное состояние.

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

Результат

Сообщения

Выполнить

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

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

Функция steps(): количество шагов

Разбейте анимацию движения изображения на 4 равных дискретных шага. Переход между шагами должен происходить в конце каждого интервала времени. Заполните пропуск в функции `steps()`, указав только количество шагов.

CSS

@keyframes moveInSteps {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(240px);
  }
}

.icon {
  width: 64px; 
  height: 64px;
  animation-name: moveInSteps;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени steps с 4 шагами */
  animation-timing-function: input1;
}

                     @keyframes moveInSteps {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(240px);
  }
}

.icon {
  width: 64px; 
  height: 64px;
  animation-name: moveInSteps;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени steps с 4 шагами */
  animation-timing-function: input1;
}

HTML

<img src="https://naytikurs.ru/img/4.png" class="icon" alt="icon">

Используйте функцию `steps(n, jump-term)`. В данном случае нужно указать `4` в качестве первого аргумента (`n`). Второй аргумент по умолчанию `end`, что нам и подходит. Впишите `steps(4)` или `steps(4, end)`.

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

Результат

Сообщения

Выполнить

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

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

Функция steps(): направление шага

Разбейте анимацию движения изображения на 5 дискретных шагов. Переход между шагами должен происходить в начале каждого интервала времени. Заполните пропуск в функции `steps()`, указав направление шага (`jump-term`).

CSS

@keyframes moveInSteps {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(250px);
  }
}

.icon {
  width: 64px; 
  height: 64px;
  animation-name: moveInSteps;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени steps с 5 шагами и переходом в начале */
  animation-timing-function: input1;
}

                     @keyframes moveInSteps {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(250px);
  }
}

.icon {
  width: 64px; 
  height: 64px;
  animation-name: moveInSteps;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  /* Укажите функцию времени steps с 5 шагами и переходом в начале */
  animation-timing-function: input1;
}

HTML

<img src="https://naytikurs.ru/img/5.png" class="icon" alt="icon">

Используйте функцию `steps(n, jump-term)`. Вам нужно указать `5` шагов и `start` в качестве второго аргумента (`jump-term`), чтобы изменение происходило в начале интервала. Впишите `steps(5, start)`.

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

Результат

Сообщения

Выполнить

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

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

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

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

CSS

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #1abc9c;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Впишите имя свойства для временной функции */
  input1: linear;
}

                     @keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #1abc9c;
  position: relative;
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* Впишите имя свойства для временной функции */
  input1: linear;
}

HTML

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

Свойство, определяющее кривую скорости анимации, называется `animation-timing-function`. Впишите это имя свойства.

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

Результат

Сообщения

Выполнить

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

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