Множественные анимации: Тренажер CSS

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

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

Список тем

Две простые анимации по имени

Заставьте синий квадрат одновременно двигаться вправо и плавно появляться. Для этого примените к элементу `.animated-box` две предопределенные анимации (`moveRight` и `fadeIn`), указав их имена через запятую в соответствующем свойстве.

CSS

@keyframes moveRight {
  from { left: 0px; }
  to { left: 100px; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated-box {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  position: relative;
  /* Примените анимации moveRight и fadeIn */
  input1: moveRight, fadeIn;
  animation-duration: 3s, 2s;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate, alternate;
}

                     @keyframes moveRight {
  from { left: 0px; }
  to { left: 100px; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated-box {
  width: 50px;
  height: 50px;
  background-color: dodgerblue;
  position: relative;
  /* Примените анимации moveRight и fadeIn */
  input1: moveRight, fadeIn;
  animation-duration: 3s, 2s;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate, alternate;
}

HTML

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

Чтобы применить несколько анимаций к одному элементу, используйте свойство `animation-name` и перечислите имена нужных `@keyframes` правил через запятую. Убедитесь, что остальные свойства анимации (`animation-duration`, `animation-iteration-count` и т.д.) также содержат значения для каждой анимации, разделенные запятыми.

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

Результат

Сообщения

Выполнить

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

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

Две анимации через shorthand

Используя сокращенное свойство `animation`, примените к красному кругу две анимации: `pulse` (пульсация размера) и `spin` (вращение). Задайте для `pulse` длительность 2 секунды, а для `spin` - 3 секунды. Обе анимации должны повторяться бесконечно.

CSS

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

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

.animated-circle {
  width: 60px;
  height: 60px;
  background-color: tomato;
  border-radius: 50%;
  margin: 20px;
  /* Примените анимации pulse (2s, бесконечно) и spin (3s, бесконечно) */
  input1: pulse 2s infinite, spin 3s infinite;
}

                     @keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

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

.animated-circle {
  width: 60px;
  height: 60px;
  background-color: tomato;
  border-radius: 50%;
  margin: 20px;
  /* Примените анимации pulse (2s, бесконечно) и spin (3s, бесконечно) */
  input1: pulse 2s infinite, spin 3s infinite;
}

HTML

<div class="animated-circle"></div>

Сокращенное свойство `animation` позволяет задать несколько параметров для одной или нескольких анимаций. Чтобы применить несколько анимаций, перечислите их параметры через запятую. Для каждой анимации укажите как минимум имя и длительность. Например: `animation: pulse 2s infinite, spin 3s infinite;`.

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

Результат

Сообщения

Выполнить

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

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

Разные функции времени для анимаций

Заставьте зеленый прямоугольник двигаться вверх (`slideUp`) с эффектом 'ease-in-out' и одновременно изменять цвет фона (`changeColor`) линейно ('linear'). Используйте сокращенное свойство `animation` и укажите соответствующие функции времени для каждой анимации.

CSS

@keyframes slideUp {
  from { transform: translateY(50px); }
  to { transform: translateY(0px); }
}

@keyframes changeColor {
  0% { background-color: mediumseagreen; }
  50% { background-color: gold; }
  100% { background-color: mediumseagreen; }
}

.animated-rect {
  width: 80px;
  height: 40px;
  background-color: mediumseagreen;
  margin: 30px;
  position: relative;
  /* Анимация: slideUp 3s ease-in-out бесконечно, changeColor 4s linear бесконечно */
  animation: slideUp 3s input1 infinite, changeColor 4s input2 infinite;
}

                     @keyframes slideUp {
  from { transform: translateY(50px); }
  to { transform: translateY(0px); }
}

@keyframes changeColor {
  0% { background-color: mediumseagreen; }
  50% { background-color: gold; }
  100% { background-color: mediumseagreen; }
}

.animated-rect {
  width: 80px;
  height: 40px;
  background-color: mediumseagreen;
  margin: 30px;
  position: relative;
  /* Анимация: slideUp 3s ease-in-out бесконечно, changeColor 4s linear бесконечно */
  animation: slideUp 3s input1 infinite, changeColor 4s input2 infinite;
}

HTML

<div class="animated-rect"></div>

В сокращенном свойстве `animation` вы можете указать разные `animation-timing-function` для каждой анимации, перечисляя их через запятую в соответствующей позиции. Порядок значений важен: `animation: [name] [duration] [timing-function] ... , [name] [duration] [timing-function] ... ;`.

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

Результат

Сообщения

Выполнить

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

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

Анимации с разной задержкой

Примените к изображению две анимации: `scaleUp` (увеличение) и `fadeOut` (исчезновение). Анимация `scaleUp` должна начаться немедленно (задержка 0s), а `fadeOut` - с задержкой в 1 секунду. Обе анимации должны длиться 2 секунды и выполниться один раз.

CSS

@keyframes scaleUp {
  from { transform: scale(0.5); opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.animated-image {
  width: 100px;
  height: auto;
  margin: 20px;
  /* Анимация: scaleUp 2s без задержки, fadeOut 2s с задержкой 1s. Обе 1 раз */
  animation: scaleUp 2s input1 1, fadeOut 2s input2 1;
  /* Чтобы изображение осталось в конечном состоянии */
  animation-fill-mode: forwards, forwards;
}

                     @keyframes scaleUp {
  from { transform: scale(0.5); opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.animated-image {
  width: 100px;
  height: auto;
  margin: 20px;
  /* Анимация: scaleUp 2s без задержки, fadeOut 2s с задержкой 1s. Обе 1 раз */
  animation: scaleUp 2s input1 1, fadeOut 2s input2 1;
  /* Чтобы изображение осталось в конечном состоянии */
  animation-fill-mode: forwards, forwards;
}

HTML

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

Чтобы задать разную задержку (`animation-delay`) для нескольких анимаций в сокращенном свойстве `animation`, укажите значение задержки для каждой анимации через запятую. Помните о порядке значений: `animation: [name] [duration] [timing-function] [delay] ... ;`. Если `timing-function` не указана, можно пропустить ее или использовать значение по умолчанию `ease`.

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

Результат

Сообщения

Выполнить

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

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

Множественные анимации через полные свойства

Используя *полные* (не сокращенные) свойства анимации, примените к элементу `.fancy-box` две анимации: `rotate` (вращение на 90 градусов) и `changeBorder` (изменение стиля рамки). Задайте разные длительности и количества повторений для каждой.

CSS

@keyframes rotate {
  to { transform: rotate(90deg); }
}

@keyframes changeBorder {
  50% { border-style: dashed; border-color: orange; }
}

.fancy-box {
  width: 70px;
  height: 70px;
  margin: 40px;
  background-color: lightcoral;
  border: 3px solid black;
  /* Имена анимаций */
  input1: rotate, changeBorder;
  /* Длительности: 4s для rotate, 2s для changeBorder */
  input2: 4s, 2s;
  /* Повторения: 2 раза для rotate, 4 раза для changeBorder */
  input3: 2, 4;
  /* Направление: alternate для обеих */
  animation-direction: alternate, alternate;
}

                     @keyframes rotate {
  to { transform: rotate(90deg); }
}

@keyframes changeBorder {
  50% { border-style: dashed; border-color: orange; }
}

.fancy-box {
  width: 70px;
  height: 70px;
  margin: 40px;
  background-color: lightcoral;
  border: 3px solid black;
  /* Имена анимаций */
  input1: rotate, changeBorder;
  /* Длительности: 4s для rotate, 2s для changeBorder */
  input2: 4s, 2s;
  /* Повторения: 2 раза для rotate, 4 раза для changeBorder */
  input3: 2, 4;
  /* Направление: alternate для обеих */
  animation-direction: alternate, alternate;
}

HTML

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

Когда вы используете полные свойства анимации (`animation-name`, `animation-duration`, `animation-iteration-count` и т.д.), вы также можете применять несколько анимаций, перечисляя соответствующие значения для каждой анимации через запятую в каждом свойстве. Порядок значений в каждом свойстве должен соответствовать порядку имен в `animation-name`.

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

Результат

Сообщения

Выполнить

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

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

Три анимации одновременно

Создайте сложный эффект для текстового элемента `h1`. Примените три анимации одновременно: `colorShift` (изменение цвета текста), `moveAround` (движение по небольшой траектории) и `textSize` (изменение размера шрифта). Используйте сокращенное свойство `animation` и задайте разные параметры для каждой.

CSS

@keyframes colorShift {
  0% { color: blue; }
  50% { color: green; }
  100% { color: red; }
}

@keyframes moveAround {
  0% { transform: translate(0, 0); }
  25% { transform: translate(5px, 5px); }
  75% { transform: translate(-5px, 5px); }
  100% { transform: translate(0, 0); }
}

@keyframes textSize {
  0% { font-size: 20px; }
  50% { font-size: 24px; }
  100% { font-size: 20px; }
}

.animated-text {
  text-align: center;
  padding-top: 50px;
  position: relative;
  /* Примените 3 анимации: */
  /* 1. colorShift: 5s, linear, бесконечно */
  /* 2. moveAround: 3s, ease-in-out, бесконечно */
  /* 3. textSize: 4s, ease, бесконечно, с задержкой 0.5s */
  animation: 
    colorShift 5s linear infinite, 
    input1 3s ease-in-out infinite, 
    textSize 4s input2 input3 infinite;
}

                     @keyframes colorShift {
  0% { color: blue; }
  50% { color: green; }
  100% { color: red; }
}

@keyframes moveAround {
  0% { transform: translate(0, 0); }
  25% { transform: translate(5px, 5px); }
  75% { transform: translate(-5px, 5px); }
  100% { transform: translate(0, 0); }
}

@keyframes textSize {
  0% { font-size: 20px; }
  50% { font-size: 24px; }
  100% { font-size: 20px; }
}

.animated-text {
  text-align: center;
  padding-top: 50px;
  position: relative;
  /* Примените 3 анимации: */
  /* 1. colorShift: 5s, linear, бесконечно */
  /* 2. moveAround: 3s, ease-in-out, бесконечно */
  /* 3. textSize: 4s, ease, бесконечно, с задержкой 0.5s */
  animation: 
    colorShift 5s linear infinite, 
    input1 3s ease-in-out infinite, 
    textSize 4s input2 input3 infinite;
}

HTML

<h1 class="animated-text">Анимация!</h1>

Принцип применения трех и более анимаций такой же, как и для двух: перечислите параметры каждой анимации через запятую в свойстве `animation`. Убедитесь, что вы указали все необходимые параметры (имя, длительность, возможно, функция времени, задержка, количество повторений) для каждой из трех анимаций.

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

Результат

Сообщения

Выполнить

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

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