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

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

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

Список тем

Замена 'left' на 'transform'

В этом задании есть квадрат, который смещается вправо при наведении курсора. Текущая анимация использует свойство `left`, что может вызывать пересчет макета (layout). Ваша задача — заменить `left` на более производительное свойство `transform` для достижения того же визуального эффекта смещения по горизонтали.

CSS

.box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  transition: input1 0.5s ease;
  /* left: 0; */ /* Убрали неоптимальное свойство */
}

.box:hover {
  /* left: 50px; */ /* Заменяем это */
  input2: translateX(50px);
}

                     .box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  transition: input1 0.5s ease;
  /* left: 0; */ /* Убрали неоптимальное свойство */
}

.box:hover {
  /* left: 50px; */ /* Заменяем это */
  input2: translateX(50px);
}

HTML

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

Для горизонтального смещения с помощью `transform` используйте функцию `translateX()`. Укажите то же значение смещения (50px), которое использовалось для `left`. Не забудьте удалить или закомментировать свойство `left`.

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

Результат

Сообщения

Выполнить

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

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

Замена 'top' на 'transform'

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

CSS

.box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  /* top: 0; */
  transition: input1 0.5s ease;
}

.box:hover {
  /* top: 50px; */ /* Заменяем это */
  input1: translateY(50px);
}

                     .box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  /* top: 0; */
  transition: input1 0.5s ease;
}

.box:hover {
  /* top: 50px; */ /* Заменяем это */
  input1: translateY(50px);
}

HTML

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

Для вертикального смещения используйте функцию `translateY()` в свойстве `transform`. Значение смещения должно быть 50px. Убедитесь, что свойство `top` удалено или закомментировано в состоянии `:hover`.

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

Результат

Сообщения

Выполнить

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

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

Комбинированное смещение с 'transform'

В этом примере квадрат должен смещаться одновременно по горизонтали и вертикали при наведении. Вместо использования `top` и `left`, примените одну функцию `transform` для диагонального смещения.

CSS

.box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #2ecc71;
  transition: input1 0.5s ease;
}

.box:hover {
  input1: input2(50px, 30px);
}

                     .box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #2ecc71;
  transition: input1 0.5s ease;
}

.box:hover {
  input1: input2(50px, 30px);
}

HTML

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

Используйте функцию `translate()` внутри свойства `transform`. Она принимает два значения: смещение по оси X и смещение по оси Y. Например, `transform: translate(50px, 30px);`. Не забудьте указать `transform` в свойстве `transition`.

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

Результат

Сообщения

Выполнить

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

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

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

Квадрат должен плавно исчезать при наведении. Вместо изменения свойства `visibility` или `display`, которые могут быть менее производительными для анимаций, используйте свойство `opacity`.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: #f1c40f;
  opacity: 1;
  transition: input1 0.5s ease;
}

.box:hover {
  input1: 0;
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: #f1c40f;
  opacity: 1;
  transition: input1 0.5s ease;
}

.box:hover {
  input1: 0;
}

HTML

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

Свойство `opacity` изменяет прозрачность элемента. Значение 1 означает полную непрозрачность, 0 — полную прозрачность. Установите `opacity: 0;` для состояния `:hover` и добавьте `opacity` в список анимируемых свойств в `transition`.

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

Результат

Сообщения

Выполнить

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

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

Анимация масштабирования с 'transform'

Квадрат должен увеличиваться в размере при наведении. Вместо анимации свойств `width` и `height`, которые вызывают пересчет макета, используйте функцию `scale()` свойства `transform`.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: #9b59b6;
  transition: input1 0.5s ease;
}

.box:hover {
  input1: input2(1.5);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: #9b59b6;
  transition: input1 0.5s ease;
}

.box:hover {
  input1: input2(1.5);
}

HTML

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

Используйте `transform: scale(значение);`. Значение больше 1 увеличивает элемент, меньше 1 — уменьшает. Например, `scale(1.5)` увеличит элемент в полтора раза. Не забудьте добавить `transform` в `transition`.

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

Результат

Сообщения

Выполнить

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

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

Анимация вращения с 'transform'

Заставьте квадрат вращаться при наведении курсора. Используйте соответствующую функцию `transform` для вращения элемента.

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: #1abc9c;
  transition: input1 0.5s ease;
}

.box:hover {
  input1: input2(45deg);
}

                     .box {
  width: 50px;
  height: 50px;
  background-color: #1abc9c;
  transition: input1 0.5s ease;
}

.box:hover {
  input1: input2(45deg);
}

HTML

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

Для вращения элемента используйте функцию `rotate()` свойства `transform`. Укажите угол вращения в градусах, например, `rotate(45deg)`. Добавьте `transform` в `transition`.

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

Результат

Сообщения

Выполнить

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

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

Использование 'will-change' для трансформации

Квадрат анимируется с помощью `transform: translateX()`. Чтобы помочь браузеру оптимизировать эту анимацию, добавьте свойство `will-change` с соответствующим значением.

CSS

.box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #e67e22;
  transition: transform 0.5s ease;
  input1: transform;
}

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

                     .box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #e67e22;
  transition: transform 0.5s ease;
  input1: transform;
}

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

HTML

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

Добавьте свойство `will-change` к элементу `.box`. В качестве значения укажите имя свойства, которое будет изменяться — в данном случае `transform`. Это подскажет браузеру, что элемент скоро будет трансформирован, и позволит заранее подготовить его (например, вынести на отдельный слой).

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

Результат

Сообщения

Выполнить

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

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

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

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

CSS

.box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #34495e;
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.5s ease;
  input1: transform, input2;
}

.box:hover {
  transform: translateX(50px);
  opacity: 0;
}

                     .box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #34495e;
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.5s ease;
  input1: transform, input2;
}

.box:hover {
  transform: translateX(50px);
  opacity: 0;
}

HTML

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

В свойстве `will-change` можно перечислить несколько свойств через запятую. Добавьте `will-change: transform, opacity;` к элементу `.box`.

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

Результат

Сообщения

Выполнить

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

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

Оптимизация @keyframes анимации смещения

Задана `@keyframes` анимация `moveAround`, которая использует `left` и `top` для перемещения элемента по кругу. Перепишите эту анимацию, используя `transform: translate()` для повышения производительности.

CSS

@keyframes moveAround {
  0% {
    input1: translate(0, 0);
  }
  25% {
    input1: translate(50px, 0);
  }
  50% {
    input1: translate(50px, 50px);
  }
  75% {
    input1: translate(0, 50px);
  }
  100% {
    input1: translate(0, 0);
  }
}

.box {
  position: relative;
  width: 30px;
  height: 30px;
  background-color: #16a085;
  animation: moveAround 4s infinite linear;
  /* Добавим will-change для лучшей практики */
  will-change: input1;
}

                     @keyframes moveAround {
  0% {
    input1: translate(0, 0);
  }
  25% {
    input1: translate(50px, 0);
  }
  50% {
    input1: translate(50px, 50px);
  }
  75% {
    input1: translate(0, 50px);
  }
  100% {
    input1: translate(0, 0);
  }
}

.box {
  position: relative;
  width: 30px;
  height: 30px;
  background-color: #16a085;
  animation: moveAround 4s infinite linear;
  /* Добавим will-change для лучшей практики */
  will-change: input1;
}

HTML

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

Замените пары `top`/`left` на соответствующие значения `transform: translate(X, Y)` в каждом ключевом кадре анимации. Например, `top: 0; left: 50px;` станет `transform: translate(50px, 0);`. Убедитесь, что анимация применяет `transform`.

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

Результат

Сообщения

Выполнить

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

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

Оптимизация @keyframes анимации появления/исчезновения

Создайте `@keyframes` анимацию `fadeInOut`, которая плавно показывает и скрывает элемент, используя `opacity` вместо менее производительных свойств.

CSS

@keyframes fadeInOut {
  0%, 100% {
    input1: 0;
  }
  50% {
    input1: 1;
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #d35400;
  animation: fadeInOut 3s infinite ease-in-out;
  /* Добавим will-change */
  will-change: input1;
}

                     @keyframes fadeInOut {
  0%, 100% {
    input1: 0;
  }
  50% {
    input1: 1;
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #d35400;
  animation: fadeInOut 3s infinite ease-in-out;
  /* Добавим will-change */
  will-change: input1;
}

HTML

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

Определите анимацию `@keyframes fadeInOut`. В начальном (0%) и конечном (100%) кадрах установите `opacity: 0;`. В середине анимации (50%) установите `opacity: 1;`. Примените эту анимацию к элементу `.box`.

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

Результат

Сообщения

Выполнить

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

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

Комбинированная @keyframes анимация (transform и opacity)

Создайте `@keyframes` анимацию `pulseAndMove`, которая одновременно изменяет размер элемента (с помощью `scale`) и его прозрачность (`opacity`), а также немного смещает его (`translate`). Используйте только производительные свойства.

CSS

@keyframes pulseAndMove {
  0%, 100% {
    input1: scale(1) translateY(0);
    input2: 0.5;
  }
  50% {
    input1: scale(1.2) translateY(-10px);
    input2: 1;
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #8e44ad;
  border-radius: 50%; /* Сделаем круг для наглядности пульсации */
  margin: 20px auto; /* Центрируем и даем отступ */
  animation: pulseAndMove 2s infinite ease-in-out;
  will-change: input1, input2;
}

                     @keyframes pulseAndMove {
  0%, 100% {
    input1: scale(1) translateY(0);
    input2: 0.5;
  }
  50% {
    input1: scale(1.2) translateY(-10px);
    input2: 1;
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #8e44ad;
  border-radius: 50%; /* Сделаем круг для наглядности пульсации */
  margin: 20px auto; /* Центрируем и даем отступ */
  animation: pulseAndMove 2s infinite ease-in-out;
  will-change: input1, input2;
}

HTML

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

В анимации `pulseAndMove` комбинируйте `transform` (с функциями `scale` и `translateY`) и `opacity`. Например, в 0% и 100% кадре элемент может быть в исходном состоянии (`transform: scale(1) translateY(0); opacity: 0.5;`), а в 50% кадре - увеличен, смещен и более непрозрачен (`transform: scale(1.2) translateY(-10px); opacity: 1;`). Примените анимацию к элементу и добавьте `will-change: transform, opacity;`.

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

Результат

Сообщения

Выполнить

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

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

Замена 'margin' на 'transform' в анимации

Изображение смещается вниз при наведении за счет изменения `margin-top`. Это вызывает пересчет макета. Замените анимацию `margin-top` на использование `transform: translateY()` для более плавной анимации.

CSS

.image-container img {
  display: block;
  width: 100px;
  height: auto;
  /* margin-top: 0; */ /* Убираем */
  transition: input1 0.4s ease;
}

.image-container:hover img {
  /* margin-top: 20px; */ /* Заменяем это */
  input1: translateY(20px);
}

                     .image-container img {
  display: block;
  width: 100px;
  height: auto;
  /* margin-top: 0; */ /* Убираем */
  transition: input1 0.4s ease;
}

.image-container:hover img {
  /* margin-top: 20px; */ /* Заменяем это */
  input1: translateY(20px);
}

HTML

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

Удалите или закомментируйте `margin-top` в состоянии `:hover`. Вместо этого добавьте `transform: translateY(20px);`. Также измените свойство `transition`, чтобы оно отслеживало изменения `transform`, а не `margin-top`.

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

Результат

Сообщения

Выполнить

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

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

Использование 'translateZ(0)' для создания слоя

К элементу применяется анимация вращения. Чтобы потенциально улучшить производительность, можно попробовать вынести элемент на отдельный композитный слой с помощью "хака" `transform: translateZ(0)`. Добавьте это свойство к элементу `.spinner`.

CSS

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  width: 50px;
  height: 50px;
  margin: 30px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  /* Добавляем хак для слоя */
  input1: translateZ(0);
}

                     @keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  width: 50px;
  height: 50px;
  margin: 30px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  /* Добавляем хак для слоя */
  input1: translateZ(0);
}

HTML

<div class="spinner"></div>

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

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

Результат

Сообщения

Выполнить

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

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