Исполняемые доки CSS: Анимация CSS

Q: Как сделать анимацию в CSS?

Опишите шаги через @keyframes name { from { ... } to { ... } }, а затем примените их к элементу свойством animation с длительностью: animation: name 1s ease-out;. Длительность обязательна, потому что по умолчанию она 0s.

Q: Как зациклить CSS-анимацию навсегда?

Задайте animation-iteration-count: infinite или добавьте infinite в сокращенную запись: animation: spin 1s linear infinite;. Добавьте alternate, чтобы в каждом цикле анимация шла вперед, а затем назад.

Q: Как поставить CSS-анимацию на паузу?

Задайте элементу animation-play-state: paused, например в :hover или через класс, который добавляет JavaScript. Если вернуть running, анимация продолжится с того места, где остановилась.

Q: Как отключить анимации для пользователей, которые предпочитают меньше движения?

Оберните анимацию в @media (prefers-reduced-motion: no-preference) { ... } или уберите ее внутри @media (prefers-reduced-motion: reduce) { ... }. Запрос следует настройке уменьшения движения в операционной системе пользователя.

CSS-анимация на одном примере

У анимации две части: @keyframes, который описывает шаги, и свойство animation, которое применяет их к элементу с длительностью. Эта карточка выезжает и проявляется при загрузке страницы:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS animation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .card {
      padding: 16px;
      border-radius: 8px;
      background: #2563eb;
      color: white;
      animation: slide-in 0.6s ease-out both;
    }
    /* Keep only the fade for people who asked for less motion */
    @media (prefers-reduced-motion: reduce) {
      @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
    }
  </style>
</head>
<body>
  <div class="card">Hello! This card animated in.</div>
</body>
</html>

Измените код (или поменяйте длительность на 2s), и превью перезагрузится, так что вы снова увидите появление карточки. Блок @media (prefers-reduced-motion: reduce) заменяет ключевые кадры простым проявлением только для читателей, в чьей системе включено уменьшение движения.

Синтаксис @keyframes

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

from то же самое, что 0%, а to то же, что 100%.
Добавляйте сколько нужно процентных шагов. Шаги с одинаковыми стилями можно записать в одну строку: 0%, 100% { ... }.
Свойство, которого нет в первом или последнем ключевом кадре, анимируется от собственного значения элемента или к нему.
Имя (pulse) передается в animation-name. Регистр в нем важен, и оно не может быть ключевым словом вроде none.

Свойства animation

Свойство	Что задает	По умолчанию
`animation-name`	какой `@keyframes` запускать	`none`
`animation-duration`	длительность одного цикла	`0s`
`animation-timing-function`	кривая скорости между ключевыми кадрами	`ease`
`animation-delay`	ожидание перед первым циклом (отрицательное значение начинает с середины)	`0s`
`animation-iteration-count`	число циклов или `infinite`	`1`
`animation-direction`	`normal`, `reverse`, `alternate`, `alternate-reverse`	`normal`
`animation-fill-mode`	стили до и после: `none`, `forwards`, `backwards`, `both`	`none`
`animation-play-state`	`running` или `paused`	`running`

Сокращенная запись принимает их почти в любом порядке. Правило одно: первое значение времени это длительность, второе задержка:

.loader {
  animation: pulse 1.2s ease-in-out 0.2s infinite alternate both;
  /*         name  duration timing  delay count   direction fill */
}

direction и fill-mode вживую

Выберите направление, режим заполнения и число повторов, затем нажмите Play. Блок сдвигается на 200px к концу дорожки. Ниже показано, где он остановился после окончания анимации:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>direction and fill-mode</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    @keyframes move {
      from { transform: translateX(0); background: #2563eb; }
      to   { transform: translateX(200px); background: #16a34a; }
    }
    .track { width: 240px; background: #f3f4f6; margin: 10px 0; }
    #box { width: 40px; height: 40px; background: #f59e0b; }
    .controls { display: flex; flex-wrap: wrap; gap: 10px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>direction <select id="dir"><option>normal</option><option>reverse</option><option>alternate</option></select></label>
    <label>fill-mode <select id="fill"><option>none</option><option>forwards</option><option>backwards</option><option>both</option></select></label>
    <label>count <select id="count"><option>1</option><option>2</option></select></label>
    <button id="play">Play</button>
  </div>
  <div class="track"><div id="box"></div></div>
  <p id="out">The amber color is the box's own style, used whenever no keyframe applies.</p>
  <script>
    const box = document.getElementById('box');
    const val = (id) => document.getElementById(id).value;
    document.getElementById('play').addEventListener('click', () => {
      box.style.animation = 'none';
      box.offsetWidth; // restart: let the browser see the animation removed
      box.style.animation = 'move 1s ease-in-out ' + val('count') + ' ' + val('dir') + ' ' + val('fill');
    });
    box.addEventListener('animationend', () => {
      const x = new DOMMatrix(getComputedStyle(box).transform).m41;
      document.getElementById('out').textContent = 'Finished at x = ' + Math.round(x) + 'px, color ' + getComputedStyle(box).backgroundColor;
    });
  </script>
</body>
</html>

На что смотреть:

fill-mode: none (по умолчанию): после последнего кадра блок прыгает обратно на x = 0 и снова становится янтарным.
forwards: остается на последнем ключевом кадре. С normal это x = 200 и зеленый; с reverse он заканчивает на x = 0 и синим, потому что последним проигрался кадр from.
alternate с числом повторов 2 идет туда и обратно, поэтому даже с forwards заканчивает на x = 0.

Бесконечные циклы: индикатор загрузки

infinite повторяет анимацию бесконечно, а animation-delay у каждого дочернего элемента сдвигает их, чтобы они двигались по очереди. Делайте циклы спокойными: медленными, небольшими, без мигания.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Loading dots</title>
  <style>
    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
      40%           { transform: scale(1);   opacity: 1; }
    }
    .dots { display: flex; gap: 8px; padding: 12px; }
    .dots span {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #2563eb;
      animation: bounce 1.4s ease-in-out infinite;
    }
    .dots span:nth-child(2) { animation-delay: 0.2s; }
    .dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes fade {
      0%, 80%, 100% { opacity: 0.4; }
      40%           { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .dots span { animation-name: fade; } /* no size change, only a soft fade */
    }
  </style>
</head>
<body>
  <div class="dots" role="status" aria-label="Loading"><span></span><span></span><span></span></div>
</body>
</html>

role="status" с aria-label сообщает пользователям программ чтения с экрана, что что-то загружается, чего одни точки не говорят. Вращающийся круг разобран на странице про поворот rotate.

Пауза и управление анимациями

animation-play-state: paused замораживает анимацию там, где она есть, а running продолжает ее оттуда. Наведите курсор на полосу ниже, чтобы поставить ее на паузу:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pause on hover</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide {
      from { transform: translateX(0); }
      to   { transform: translateX(260px); }
    }
    .track { width: 300px; padding: 6px 0; background: #f3f4f6; }
    .bar { width: 40px; height: 24px; border-radius: 4px; background: #16a34a; animation: slide 3s ease-in-out infinite alternate; }
    .track:hover .bar { animation-play-state: paused; }
  </style>
</head>
<body>
  <div class="track"><div class="bar"></div></div>
  <p>Hover the gray track to pause.</p>
</body>
</html>

В JavaScript element.getAnimations() возвращает запущенные CSS-анимации, у каждой есть pause(), play(), cancel() и currentTime, который можно читать и задавать. Событие animationend срабатывает, когда заканчивается не бесконечная анимация, а animationiteration в конце каждого цикла.

Уменьшение движения и никакого мигания

Два правила доступности действуют для каждой анимации:

Уменьшение движения. Люди могут попросить систему уменьшить движение, потому что им от него становится плохо. Самый надежный прием: добавлять движение, только если о его уменьшении не просили:

@media (prefers-reduced-motion: no-preference) {
  .hero-title { animation: slide-in 0.8s ease-out both; }
}

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

Плавные анимации без рывков

По возможности анимируйте transform и opacity. Браузер применяет их без повторной раскладки страницы, поэтому они остаются плавными даже на медленных телефонах. Анимация width, height, top, left или margin пересчитывает раскладку на каждом кадре. Чтобы переместить элемент, используйте translate() со страницы про transform.

Частые ошибки

Нет длительности. animation: fade; ничего не делает, потому что длительность по умолчанию 0s.
Имя не совпадает. animation-name должно точно совпадать с именем @keyframes, включая регистр.
Прыжок обратно в конце. Добавьте forwards (или both), чтобы сохранить последний ключевой кадр.
Мерцание перед анимацией с задержкой. Во время animation-delay элемент показывает свои обычные стили. backwards (или both) применяет первый ключевой кадр во время задержки.
Перезапуск анимации тем же значением. Повторное присвоение того же animation ничего не делает. Уберите его, вызовите перерасчет раскладки (el.offsetWidth) и задайте снова, как делает кнопка Play выше.
Анимация display. Он меняется мгновенно. Анимируйте opacity и transform.

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

Как сделать анимацию в CSS?

Опишите шаги через @keyframes name { from { ... } to { ... } }, а затем примените их к элементу свойством animation с длительностью: animation: name 1s ease-out;. Длительность обязательна, потому что по умолчанию она 0s.

Что делает animation-fill-mode: forwards?

Сохраняет стили последнего ключевого кадра после окончания анимации. Без него элемент прыгает обратно к своим обычным стилям. backwards применяет первый ключевой кадр во время задержки, а both делает и то и другое.

Как зациклить CSS-анимацию навсегда?

Задайте animation-iteration-count: infinite или добавьте infinite в сокращенную запись: animation: spin 1s linear infinite;. Добавьте alternate, чтобы в каждом цикле анимация шла вперед, а затем назад.

Чем CSS-анимация отличается от перехода?

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

Как поставить CSS-анимацию на паузу?

Задайте элементу animation-play-state: paused, например в :hover или через класс, который добавляет JavaScript. Если вернуть running, анимация продолжится с того места, где остановилась.

Как отключить анимации для пользователей, которые предпочитают меньше движения?

Оберните анимацию в @media (prefers-reduced-motion: no-preference) { ... } или уберите ее внутри @media (prefers-reduced-motion: reduce) { ... }. Запрос следует настройке уменьшения движения в операционной системе пользователя.

Связанные концепции