Создание анимированных иконок: Тренажер CSS

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

Эта серия заданий поможет вам попрактиковаться в создании простых и сложных анимаций для иконок с использованием CSS. Вы будете работать с готовым HTML-кодом и дописывать недостающие части CSS-правил, чтобы оживить статичные иконки. Задания охватывают использование `transition` для плавных эффектов при наведении, а также `@keyframes` и свойства `animation` для создания циклических или более сложных анимаций. Сложность заданий постепенно возрастает, начиная от базовых эффектов масштабирования и вращения до создания кастомных анимаций вроде пульсации, тряски или индикатора загрузки.

Список тем

Масштабирование иконки при наведении

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

CSS

.icon-scale {
  display: inline-block;
  margin: 20px;
  /* Укажите анимируемое свойство и длительность перехода */
  transition: input1 input2 ease;
}

.icon-scale:hover {
  /* Примените трансформацию для увеличения */
  transform: input3(1.2);
}

                     .icon-scale {
  display: inline-block;
  margin: 20px;
  /* Укажите анимируемое свойство и длительность перехода */
  transition: input1 input2 ease;
}

.icon-scale:hover {
  /* Примените трансформацию для увеличения */
  transform: input3(1.2);
}

HTML

<img src="https://naytikurs.ru/img/1.png" alt="Icon" width="50" height="50" class="icon-scale">

Используйте свойство `transition`, чтобы указать, какое CSS-свойство должно анимироваться (`transform`) и как долго (`0.3s`). В псевдоклассе `:hover` примените функцию `transform: scale()` со значением больше 1 (например, `1.2`), чтобы увеличить иконку.

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

Результат

Сообщения

Выполнить

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

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

Вращение иконки при наведении

Заставьте иконку плавно поворачиваться на 360 градусов при наведении на нее курсора. Укажите необходимую функцию трансформации и временную функцию для перехода.

CSS

.icon-rotate {
  display: inline-block;
  margin: 20px;
  transition: transform 0.5s input1;
}

.icon-rotate:hover {
  /* Примените трансформацию для поворота */
  transform: input2(360deg);
}

                     .icon-rotate {
  display: inline-block;
  margin: 20px;
  transition: transform 0.5s input1;
}

.icon-rotate:hover {
  /* Примените трансформацию для поворота */
  transform: input2(360deg);
}

HTML

<img src="https://naytikurs.ru/img/2.png" alt="Icon" width="50" height="50" class="icon-rotate">

Как и в предыдущем задании, используйте `transition` для свойства `transform`. В псевдоклассе `:hover` примените функцию `transform: rotate()` со значением `360deg`. Попробуйте разные временные функции (`ease-in-out`, `linear`) для `transition-timing-function`, чтобы увидеть разницу.

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

Результат

Сообщения

Выполнить

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

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

Непрерывное вращение иконки

Создайте анимацию, которая заставляет иконку непрерывно вращаться. Вам нужно определить `@keyframes`, задать имя анимации, её длительность, временную функцию и количество повторений.

CSS

/* Определите анимацию вращения */
@keyframes input1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon-spin {
  display: inline-block;
  margin: 20px;
  /* Примените анимацию: имя, длительность, функция времени, повторение */
  animation: input1 2s input2 input3;
}

                     /* Определите анимацию вращения */
@keyframes input1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon-spin {
  display: inline-block;
  margin: 20px;
  /* Примените анимацию: имя, длительность, функция времени, повторение */
  animation: input1 2s input2 input3;
}

HTML

<img src="https://naytikurs.ru/img/4.png" alt="Icon" width="50" height="50" class="icon-spin">

Сначала определите анимацию с помощью `@keyframes`, дав ей имя (например, `spin`). Внутри `@keyframes` укажите начальное (`from` или `0%`) и конечное (`to` или `100%`) состояние трансформации (`transform: rotate(0deg)` и `transform: rotate(360deg)`). Затем примените эту анимацию к элементу с помощью свойства `animation`, указав имя анимации, длительность (`2s`), временную функцию (`linear`) и количество повторений (`infinite`).

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

Результат

Сообщения

Выполнить

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

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

Пульсирующая иконка

Создайте эффект пульсации для иконки: она должна плавно увеличиваться и уменьшаться в размере бесконечное количество раз. Определите `@keyframes` для масштабирования и примените анимацию.

CSS

@keyframes input1 {
  0% {
    transform: scale(1);
  }
  50% {
    /* Увеличьте иконку в середине анимации */
    transform: input2(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.icon-pulse {
  display: inline-block;
  margin: 20px;
  /* Примените анимацию пульсации */
  animation-name: input1;
  animation-duration: 1.5s;
  animation-iteration-count: input3;
}

                     @keyframes input1 {
  0% {
    transform: scale(1);
  }
  50% {
    /* Увеличьте иконку в середине анимации */
    transform: input2(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.icon-pulse {
  display: inline-block;
  margin: 20px;
  /* Примените анимацию пульсации */
  animation-name: input1;
  animation-duration: 1.5s;
  animation-iteration-count: input3;
}

HTML

<img src="https://naytikurs.ru/img/5.png" alt="Icon" width="50" height="50" class="icon-pulse">

Определите `@keyframes` с именем (например, `pulse`). Используйте ключевые кадры `0%`, `50%` и `100%`. В `0%` и `100%` установите `transform: scale(1)`, а в `50%` - `transform: scale(1.1)` для увеличения. Примените анимацию к иконке с помощью свойства `animation`, указав имя, длительность (например, `1.5s`) и `infinite` для бесконечного повторения.

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

Результат

Сообщения

Выполнить

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

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

Тряска иконки при наведении

Сделайте так, чтобы иконка 'тряслась' при наведении на нее курсора. Для этого нужно определить `@keyframes` с несколькими шагами, имитирующими тряску, и применить эту анимацию к иконке при `:hover`.

CSS

@keyframes input1 {
  0%, 100% { transform: translateX(0); }
  25% { transform: input2(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

.icon-shake {
  display: inline-block;
  margin: 20px;
  cursor: pointer;
}

.icon-shake:hover {
  /* Примените анимацию тряски при наведении */
  animation: input1 0.4s linear;
}

                     @keyframes input1 {
  0%, 100% { transform: translateX(0); }
  25% { transform: input2(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

.icon-shake {
  display: inline-block;
  margin: 20px;
  cursor: pointer;
}

.icon-shake:hover {
  /* Примените анимацию тряски при наведении */
  animation: input1 0.4s linear;
}

HTML

<img src="https://naytikurs.ru/img/6.png" alt="Icon" width="50" height="50" class="icon-shake">

Определите `@keyframes` (например, `shake`). Внутри используйте несколько процентных шагов (0%, 25%, 50%, 75%, 100%) и функцию `transform: translateX()` с небольшими смещениями (например, -5px, 5px, -3px, 3px, 0). Затем для селектора `.icon-shake:hover` примените свойство `animation`, указав имя анимации (`shake`), короткую длительность (например, `0.4s`) и временную функцию (`linear` или `ease-in-out`).

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

Результат

Сообщения

Выполнить

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

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

Подпрыгивающая иконка

Создайте анимацию, имитирующую подпрыгивание иконки. Иконка должна немного опускаться, затем подпрыгивать вверх и возвращаться в исходное положение. Анимация должна повторяться.

CSS

@keyframes input1 {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    /* Сместите иконку вверх */
    transform: input2(-10px);
    /* Измените временную функцию для 'падения' */
    animation-timing-function: input3;
  }
}

.icon-bounce {
  display: inline-block;
  margin: 20px;
  /* Примените анимацию подпрыгивания */
  animation: input1 1s infinite;
}

                     @keyframes input1 {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    /* Сместите иконку вверх */
    transform: input2(-10px);
    /* Измените временную функцию для 'падения' */
    animation-timing-function: input3;
  }
}

.icon-bounce {
  display: inline-block;
  margin: 20px;
  /* Примените анимацию подпрыгивания */
  animation: input1 1s infinite;
}

HTML

<img src="https://naytikurs.ru/img/7.png" alt="Icon" width="50" height="50" class="icon-bounce">

Определите `@keyframes` (например, `bounce`). Используйте шаги 0%, 50%, 100%. В 0% и 100% трансформация отсутствует (`transform: translateY(0)`). В 50% сместите иконку вверх (`transform: translateY(-10px)`). Примените анимацию к иконке с помощью `animation`, указав имя, длительность (например, `1s`), временную функцию (`ease-in-out`) и количество повторений (`infinite`).

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

Результат

Сообщения

Выполнить

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

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

Анимация индикатора загрузки

Создайте простой анимированный индикатор загрузки (спиннер) с использованием CSS. Спиннер должен представлять собой вращающееся кольцо. Вам нужно задать имя `@keyframes` и указать его в свойстве `animation`, а также выбрать подходящую временную функцию и количество повторений.

CSS

.spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 30px;
  border: 4px solid #eee;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  /* Примените анимацию вращения: имя, длительность, функция, повторение */
  animation: input1 1s input2 input3;
}

/* Определите анимацию вращения */
@keyframes input4 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

                     .spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 30px;
  border: 4px solid #eee;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  /* Примените анимацию вращения: имя, длительность, функция, повторение */
  animation: input1 1s input2 input3;
}

/* Определите анимацию вращения */
@keyframes input4 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

HTML

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

Индикатор уже стилизован с помощью `border` и `border-top`. Вам нужно создать `@keyframes` с именем (например, `spin`) для вращения элемента от `0deg` до `360deg` с помощью `transform: rotate()`. Затем примените эту анимацию к элементу `.spinner` через свойство `animation`, указав имя, длительность (например, `1s`), временную функцию `linear` для равномерного вращения и `infinite` для бесконечного повторения.

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

Результат

Сообщения

Выполнить

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

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

Комбинированная анимация: вращение и масштабирование

Заставьте иконку постоянно медленно вращаться. При наведении курсора она должна дополнительно увеличиваться в размере, не прекращая вращение. Используйте существующую анимацию вращения и добавьте эффект масштабирования при наведении.

CSS

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

.icon-combined {
  display: inline-block;
  margin: 20px;
  animation: spin-combined 5s linear infinite;
  /* Добавьте плавный переход для трансформации */
  input1: transform 0.3s ease;
}

.icon-combined:hover {
  /* Увеличьте иконку при наведении, сохраняя вращение */
  /* Обратите внимание: scale() перезапишет rotate() из анимации, */
  /* но браузеры обычно умножают матрицы трансформаций */
  /* или можно добавить !important, но лучше избегать */
  /* Простейший способ - просто добавить scale */
  transform: input2(1.2);
  /* Чтобы точно сохранить вращение, потребовалась бы более сложная логика */
  /* или разделение на вложенные элементы */
}

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

.icon-combined {
  display: inline-block;
  margin: 20px;
  animation: spin-combined 5s linear infinite;
  /* Добавьте плавный переход для трансформации */
  input1: transform 0.3s ease;
}

.icon-combined:hover {
  /* Увеличьте иконку при наведении, сохраняя вращение */
  /* Обратите внимание: scale() перезапишет rotate() из анимации, */
  /* но браузеры обычно умножают матрицы трансформаций */
  /* или можно добавить !important, но лучше избегать */
  /* Простейший способ - просто добавить scale */
  transform: input2(1.2);
  /* Чтобы точно сохранить вращение, потребовалась бы более сложная логика */
  /* или разделение на вложенные элементы */
}

HTML

<img src="https://naytikurs.ru/img/8.png" alt="Icon" width="50" height="50" class="icon-combined">

Иконка уже имеет анимацию вращения `spin`. Чтобы добавить масштабирование при наведении, используйте псевдокласс `:hover`. Внутри него примените `transform: scale(1.2)`. Также добавьте свойство `transition` к основному классу `.icon-combined`, чтобы масштабирование происходило плавно. Укажите `transform` как анимируемое свойство и задайте длительность перехода.

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

Результат

Сообщения

Выполнить

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

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