Производительность трансформаций и переходов: Тренажер CSS

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

Эта серия упражнений посвящена оптимизации анимаций в CSS с использованием свойств `transform` и `opacity`. Вы узнаете, почему анимация этих свойств более производительна по сравнению с изменением геометрии элемента (например, `width`, `height`, `margin`, `left`, `top`) или других свойств, вызывающих перерисовку (`background-color`). Задания помогут вам на практике применять производительные техники для создания плавных и эффективных анимаций, а также познакомят со свойством `will-change` для дополнительной оптимизации.

Список тем

Плавное перемещение элемента

Создайте анимацию, при которой блок плавно смещается вправо на 100px при наведении на него курсора. Используйте CSS свойство, которое обеспечивает наилучшую производительность для такого типа анимации, не вызывая пересчета геометрии страницы (layout recalculation).

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
  /* Добавьте плавный переход для свойства transform */
  input1: transform 0.4s ease;
}

.box:hover {
  /* Сместите блок вправо на 100px, используя производительное свойство */
  input2: input3(100px);
}

                     .box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
  /* Добавьте плавный переход для свойства transform */
  input1: transform 0.4s ease;
}

.box:hover {
  /* Сместите блок вправо на 100px, используя производительное свойство */
  input2: input3(100px);
}

HTML

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

Для смещения элемента без затрат на пересчет макета используйте свойство `transform` с функцией `translateX()`. Это свойство обрабатывается графическим процессором (GPU), что делает анимацию более плавной. Не забудьте добавить свойство `transition` для плавности перехода.

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

Результат

Сообщения

Выполнить

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

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

Анимация прозрачности

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

CSS

.image-container img {
  display: block; /* Убирает отступ под картинкой */
  width: 150px;
  height: auto;
  /* Добавьте плавный переход для свойства opacity */
  transition: input1 0.3s ease-in-out;
}

.image-container:hover img {
  /* Установите прозрачность 50% */
  input2: 0.5;
}

                     .image-container img {
  display: block; /* Убирает отступ под картинкой */
  width: 150px;
  height: auto;
  /* Добавьте плавный переход для свойства opacity */
  transition: input1 0.3s ease-in-out;
}

.image-container:hover img {
  /* Установите прозрачность 50% */
  input2: 0.5;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/1.png" alt="Example Image">
</div>

Свойство `opacity` идеально подходит для анимации прозрачности. Оно также обрабатывается GPU и не влияет на геометрию других элементов, что обеспечивает высокую производительность. Не забудьте указать `transition` для плавного изменения.

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

Результат

Сообщения

Выполнить

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

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

Масштабирование без пересчета макета

Реализуйте эффект увеличения элемента при наведении, не используя свойства `width` и `height`, чтобы избежать пересчета макета страницы. Элемент должен увеличиться в 1.2 раза.

CSS

.scalable-box {
  width: 80px;
  height: 80px;
  background-color: mediumseagreen;
  margin: 50px;
  /* Добавьте плавный переход для трансформации */
  input1: input2 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.scalable-box:hover {
  /* Увеличьте элемент в 1.2 раза с помощью трансформации */
  input2: input3(1.2);
}

                     .scalable-box {
  width: 80px;
  height: 80px;
  background-color: mediumseagreen;
  margin: 50px;
  /* Добавьте плавный переход для трансформации */
  input1: input2 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.scalable-box:hover {
  /* Увеличьте элемент в 1.2 раза с помощью трансформации */
  input2: input3(1.2);
}

HTML

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

Вместо изменения `width` и `height`, используйте `transform` с функцией `scale()`. Это позволит масштабировать элемент без влияния на окружающие его элементы и обеспечит лучшую производительность. Добавьте `transition` для плавности.

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

Результат

Сообщения

Выполнить

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

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

Комбинированная анимация: сдвиг и прозрачность

Создайте анимацию, где элемент при наведении одновременно сдвигается вниз на 30px и становится полностью непрозрачным (изначально он полупрозрачный). Используйте только производительные свойства для анимации.

CSS

.combo-box {
  width: 100px;
  height: 100px;
  background-color: tomato;
  opacity: 0.6;
  /* Добавьте плавный переход для transform и opacity */
  transition: input1 0.4s ease, input2 0.4s ease;
}

.combo-box:hover {
  /* Сдвиньте элемент вниз */
  transform: input3(30px);
  /* Сделайте элемент непрозрачным */
  input2: 1;
}

                     .combo-box {
  width: 100px;
  height: 100px;
  background-color: tomato;
  opacity: 0.6;
  /* Добавьте плавный переход для transform и opacity */
  transition: input1 0.4s ease, input2 0.4s ease;
}

.combo-box:hover {
  /* Сдвиньте элемент вниз */
  transform: input3(30px);
  /* Сделайте элемент непрозрачным */
  input2: 1;
}

HTML

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

Для одновременной анимации нескольких свойств, перечислите их в значении свойства `transition`, разделяя запятыми. Используйте `transform: translateY()` для сдвига и `opacity` для изменения прозрачности. Оба эти свойства обеспечивают хорошую производительность.

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

Результат

Сообщения

Выполнить

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

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

Подсказка браузеру с `will-change`

У вас есть элемент, который будет анимироваться при наведении (изменение прозрачности). Чтобы помочь браузеру оптимизировать эту анимацию заранее, добавьте соответствующее CSS свойство-подсказку.

CSS

.hint-box {
  width: 120px;
  height: 120px;
  background-color: gold;
  transition: opacity 0.5s linear;
  /* Добавьте подсказку для браузера об изменении opacity */
  input1: input2;
}

.hint-box:hover {
  opacity: 0.2;
}

                     .hint-box {
  width: 120px;
  height: 120px;
  background-color: gold;
  transition: opacity 0.5s linear;
  /* Добавьте подсказку для браузера об изменении opacity */
  input1: input2;
}

.hint-box:hover {
  opacity: 0.2;
}

HTML

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

Используйте свойство `will-change`, чтобы заранее уведомить браузер о том, какое свойство элемента скоро изменится. В данном случае, укажите `opacity` в качестве значения для `will-change`. Это может помочь браузеру вынести элемент на отдельный слой композиции.

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

Результат

Сообщения

Выполнить

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

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

`will-change` для нескольких свойств

Элемент будет анимироваться при наведении: он будет вращаться и изменять свою прозрачность. Оптимизируйте эту анимацию, используя `will-change` для обоих свойств.

CSS

.complex-animation {
  width: 100px;
  height: 100px;
  background-color: orchid;
  margin: 40px;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  /* Добавьте подсказку для браузера об изменении transform и opacity */
  will-change: input1, input2;
}

.complex-animation:hover {
  transform: rotate(180deg);
  opacity: 0.5;
}

                     .complex-animation {
  width: 100px;
  height: 100px;
  background-color: orchid;
  margin: 40px;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  /* Добавьте подсказку для браузера об изменении transform и opacity */
  will-change: input1, input2;
}

.complex-animation:hover {
  transform: rotate(180deg);
  opacity: 0.5;
}

HTML

<div class="complex-animation"></div>

Если анимируется несколько свойств, вы можете перечислить их в значении `will-change` через запятую. В данном случае это будут `transform` (для вращения) и `opacity`.

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

Результат

Сообщения

Выполнить

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

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

Аппаратное ускорение через `translateZ`

Иногда для принудительного создания слоя композиции и включения аппаратного ускорения для элемента (особенно перед сложными анимациями) используют небольшой трюк с 3D-трансформацией. Примените этот трюк к изображению.

CSS

.gpu-accelerated-image {
  width: 200px;
  height: auto;
  transition: transform 0.4s ease;
  /* Примените трюк для возможного включения аппаратного ускорения */
  input1: input2(0);
}

.gpu-accelerated-image:hover {
  transform: scale(1.1) rotate(5deg);
}

                     .gpu-accelerated-image {
  width: 200px;
  height: auto;
  transition: transform 0.4s ease;
  /* Примените трюк для возможного включения аппаратного ускорения */
  input1: input2(0);
}

.gpu-accelerated-image:hover {
  transform: scale(1.1) rotate(5deg);
}

HTML

<img src="https://naytikurs.ru/img/4.png" alt="Accelerated Image" class="gpu-accelerated-image">

Добавление `transform: translateZ(0);` (или `translate3d(0,0,0)`) к элементу часто заставляет браузер вынести его на отдельный слой композиции, что может улучшить производительность анимации, особенно если элемент перекрывает другие или имеет сложную отрисовку. Это старый метод, `will-change` предпочтительнее, но его полезно знать.

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

Результат

Сообщения

Выполнить

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

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