Frontend Academy · Урок

Анимации @keyframes

Определяйте многошаговые анимации с помощью @keyframes, подключайте их сокращённой записью animation и управляйте количеством повторов, направлением и fill-mode.

«Анимации @keyframes» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Переходы и анимации

Переходы анимируют изменение между двумя состояниями, вызванное изменением. Анимации @keyframes запускаются автоматически, могут зацикливаться, воспроизводиться в обратном направлении и бесконечно повторяться, а также задавать несколько промежуточных шагов — запускать их отдельно не требуется.

Определение @keyframes

Объявите последовательность анимации с помощью @keyframes. Задавайте состояния в процентах (0%, 50%, 100%) или используйте ключевые слова from и to.

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

Сокращённая запись animation

animation: name duration timing-function delay iteration-count direction fill-mode. Применяйте анимацию к элементу с помощью этой сокращённой записи.

.card {
  animation: fadeIn 0.4s ease-out forwards;
}

.loader {
  animation: pulse 1.5s ease-in-out infinite;
}

animation-iteration-count

Задаёт, сколько раз воспроизводится анимация. Значение infinite зацикливает её навсегда. Число задаёт точное количество воспроизведений.

.spinner {
  animation: spin 1s linear infinite;
}

.badge {
  animation: bounce 0.6s ease 3; /* plays 3 times */
}

animation-direction

normal (по умолчанию): каждый раз воспроизводится вперёд. reverse: в обратном направлении. alternate: вперёд, затем назад. alternate-reverse: в обратном порядке. alternate отлично подходит для эффектов с движением туда и обратно.

@keyframes swing {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}
.pendulum {
  animation: swing 1s ease-in-out infinite alternate;
}

animation-fill-mode

Управляет состоянием элемента (state) до и после анимации. forwards: элемент сохраняет состояние последнего ключевого кадра. backwards: состояние from применяется во время задержки. both: оба варианта.

.entrance {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.2s forwards;
  /* stays visible (opacity: 1) after animation ends */
}

animation-play-state

Приостанавливайте и возобновляйте анимации с помощью JavaScript, переключая animation-play-state: paused | running.

// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';

Несколько анимаций

Применяйте к одному элементу несколько анимаций, разделяя их запятыми. Каждая анимация выполняется независимо.

.icon {
  animation:
    rotate 2s linear infinite,
    pulse 1.5s ease-in-out infinite alternate;
}

Поочерёдный запуск анимаций с animation-delay

Задавайте задержку для элементов списка по очереди, увеличивая её для каждого следующего элемента. Пользовательские свойства CSS упрощают это с помощью JavaScript.

/* CSS */
.list-item {
  animation: slideIn 0.3s ease forwards;
  animation-delay: calc(var(--index) * 60ms);
}

/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
  el.style.setProperty('--index', i);
});

will-change — подсказка браузеру

will-change: transform сообщает браузеру, что свойство будет анимироваться, позволяя заранее переместить элемент на отдельный слой компоновщика. Используйте это умеренно: слишком большое количество слоёв компоновщика расходует память GPU.

.animated {
  will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');

Практика: экран скелетонной загрузки

Скелетонные экраны используют мерцающую анимацию, показывая, что содержимое загружается. Градиент перемещается по формам-заполнителям.

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #edf2f7 50%,
    #e2e8f0 75%
  ) 200% 0 / 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

Быстрая проверка

Какое значение animation-fill-mode заставляет элемент сохранять состояние последнего ключевого кадра после завершения анимации?

Повторение: анимации @keyframes

Определяйте анимацию с помощью @keyframes, используя from/to или проценты. Применяйте её сокращённой записью animation. Используйте iteration-count для зацикливания и направление alternate для движения туда и обратно. Задайте fill-mode: forwards, чтобы сохранить итоговое состояние (state). Используйте animation-delay и переменные CSS для поочерёдного запуска. Для плавных анимаций с компоновкой применяйте ключевые кадры transform и opacity.

Часто задаваемые вопросы

Урок «Анимации @keyframes» бесплатный?

Да — полный текст урока «Анимации @keyframes» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Анимации @keyframes»?

Определяйте многошаговые анимации с помощью @keyframes, подключайте их сокращённой записью animation и управляйте количеством повторов, направлением и fill-mode. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Анимации @keyframes»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy