Функции плавности с transition-timing-function: Тренажер CSS

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

Эта серия упражнений посвящена свойству `transition-timing-function` в CSS. Оно позволяет контролировать *как* происходит изменение значения свойства во время анимации перехода (transition), определяя кривую ускорения. По умолчанию используется значение `ease`, которое создает плавное начало и замедление в конце. Однако существует множество других встроенных функций (`linear`, `ease-in`, `ease-out`, `ease-in-out`, `steps()`) и возможность создания собственных кривых с помощью `cubic-bezier()`. В этих заданиях вы потренируетесь применять различные функции плавности к анимациям элементов, чтобы добиться нужного визуального эффекта. Задания построены от простого к сложному: сначала вы поработаете со стандартными ключевыми словами, затем с функцией `steps()` для пошаговых анимаций, и, наконец, с `cubic-bezier()` для создания уникальных кривых ускорения.

Список тем

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

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

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  margin-bottom: 10px;
  transition-property: transform;
  transition-duration: 1s;
  /* Допишите функцию плавности */
  input1: input2;
}

.box:hover {
  transform: translateX(200px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  margin-bottom: 10px;
  transition-property: transform;
  transition-duration: 1s;
  /* Допишите функцию плавности */
  input1: input2;
}

.box:hover {
  transform: translateX(200px);
}

HTML

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

Используйте свойство `transition-timing-function`. Значение, которое обеспечивает плавное начало, ускорение в середине и плавное замедление в конце, называется `ease`.

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

Результат

Сообщения

Выполнить

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

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

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

Заставьте блок двигаться с постоянной скоростью от начала до конца анимации при наведении. Никаких ускорений или замедлений быть не должно.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: tomato;
  margin-bottom: 10px;
  transition: transform 1s input1;
}

.box:hover {
  transform: translateX(200px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: tomato;
  margin-bottom: 10px;
  transition: transform 1s input1;
}

.box:hover {
  transform: translateX(200px);
}

HTML

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

Для равномерной скорости анимации используйте значение `linear` в свойстве `transition-timing-function`.

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

Результат

Сообщения

Выполнить

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

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

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

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

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: gold;
  margin-bottom: 10px;
  transition-property: transform;
  transition-duration: 1s;
  input1: ease-in;
}

.box:hover {
  transform: translateX(200px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: gold;
  margin-bottom: 10px;
  transition-property: transform;
  transition-duration: 1s;
  input1: ease-in;
}

.box:hover {
  transform: translateX(200px);
}

HTML

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

Примените значение `ease-in` для свойства `transition-timing-function`, чтобы анимация начиналась медленно и ускорялась к концу.

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

Результат

Сообщения

Выполнить

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

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

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

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

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: mediumseagreen;
  margin-bottom: 10px;
  transition: transform 1s input1;
}

.box:hover {
  transform: translateX(200px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: mediumseagreen;
  margin-bottom: 10px;
  transition: transform 1s input1;
}

.box:hover {
  transform: translateX(200px);
}

HTML

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

Используйте значение `ease-out`. Оно заставляет анимацию начаться быстро и замедлиться в конце.

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

Результат

Сообщения

Выполнить

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

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

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

Примените функцию плавности, которая сочетает `ease-in` и `ease-out`: анимация должна начаться медленно, ускориться в середине и снова замедлиться к концу.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: slateblue;
  margin-bottom: 10px;
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: input1;
}

.box:hover {
  transform: translateX(200px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: slateblue;
  margin-bottom: 10px;
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: input1;
}

.box:hover {
  transform: translateX(200px);
}

HTML

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

Значение `ease-in-out` обеспечивает медленное начало, ускорение и последующее замедление анимации.

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

Результат

Сообщения

Выполнить

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

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

Пошаговая анимация: steps() - начало

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

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: orangered;
  margin-bottom: 10px;
  transition: transform 1s input1(input2, input3);
}

.box:hover {
  transform: translateX(200px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: orangered;
  margin-bottom: 10px;
  transition: transform 1s input1(input2, input3);
}

.box:hover {
  transform: translateX(200px);
}

HTML

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

Функция `steps(n, jump-term)` делит анимацию на `n` шагов. Параметр `jump-term` может быть `jump-start` (или `start`) для изменения в начале шага, или `jump-end` (или `end`) для изменения в конце шага. Вам нужно использовать `steps(4, jump-start)` или `steps(4, start)`.

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

Результат

Сообщения

Выполнить

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

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

Пошаговая анимация: steps() - конец

Снова используйте функцию `steps()`, но на этот раз для 5 шагов. Изменение должно происходить в конце каждого шага.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: darkorchid;
  margin-bottom: 10px;
  transition-property: transform;
  transition-duration: 1.5s; /* Немного дольше для наглядности */
  transition-timing-function: input1(5, input2);
}

.box:hover {
  transform: translateX(200px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: darkorchid;
  margin-bottom: 10px;
  transition-property: transform;
  transition-duration: 1.5s; /* Немного дольше для наглядности */
  transition-timing-function: input1(5, input2);
}

.box:hover {
  transform: translateX(200px);
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

Пользовательская кривая: cubic-bezier() - аналог ease-in

Используйте функцию `cubic-bezier()` для создания пользовательской кривой плавности. Ваша задача — воспроизвести эффект `ease-in` (медленное начало, ускорение к концу), используя `cubic-bezier()`. Нужные значения для `ease-in`: (0.42, 0, 1.0, 1.0).

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: teal;
  margin-bottom: 10px;
  transition: transform 1s input1(input2);
}

.box:hover {
  transform: translateX(200px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: teal;
  margin-bottom: 10px;
  transition: transform 1s input1(input2);
}

.box:hover {
  transform: translateX(200px);
}

HTML

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

Функция `cubic-bezier(x1, y1, x2, y2)` принимает четыре числовых значения от 0 до 1 (хотя y1 и y2 могут выходить за эти пределы для создания эффектов 'отскока'), которые определяют две контрольные точки кривой Безье. Чтобы имитировать `ease-in`, используйте значения `cubic-bezier(0.42, 0, 1.0, 1.0)`.

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

Результат

Сообщения

Выполнить

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

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

Пользовательская кривая: cubic-bezier() - эффект 'отскока'

Создайте эффект легкого 'отскока' в конце анимации с помощью `cubic-bezier()`. Блок должен проехать немного дальше конечной точки, а затем вернуться. Используйте значения `cubic-bezier(0.68, -0.55, 0.27, 1.55)`.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: crimson;
  margin-bottom: 10px;
  transition: transform 1s input1(input2);
}

.box:hover {
  transform: translateX(200px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: crimson;
  margin-bottom: 10px;
  transition: transform 1s input1(input2);
}

.box:hover {
  transform: translateX(200px);
}

HTML

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

Для создания эффектов 'отскока' или 'эластичности' значения `y1` и `y2` в функции `cubic-bezier(x1, y1, x2, y2)` могут выходить за пределы диапазона [0, 1]. Используйте `cubic-bezier(0.68, -0.55, 0.27, 1.55)` для достижения нужного эффекта.

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

Результат

Сообщения

Выполнить

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

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

Разные функции для разных свойств

Заставьте блок при наведении одновременно изменять ширину и смещаться вправо. При этом ширина должна изменяться с постоянной скоростью (`linear`), а смещение должно происходить с функцией `ease-in-out`.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: forestgreen;
  margin-bottom: 10px;
  /* Примените разные функции плавности для width и transform */
  transition: width 1s input1, transform 1s input2;
}

.box:hover {
  width: 150px;
  transform: translateX(150px);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: forestgreen;
  margin-bottom: 10px;
  /* Примените разные функции плавности для width и transform */
  transition: width 1s input1, transform 1s input2;
}

.box:hover {
  width: 150px;
  transform: translateX(150px);
}

HTML

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

Вы можете указать несколько переходов, перечислив их через запятую в свойстве `transition`. Для каждого перехода можно задать свою `transition-timing-function`. Пример: `transition: width 1s linear, transform 1s ease-in-out;`.

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

Результат

Сообщения

Выполнить

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

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