0Pricing
CSS Academy · Урок

Направление анимации, режим заполнения и итерации

Управляйте направлением воспроизведения анимации, числом повторов и конечным состоянием с помощью fill-mode.

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

Количество повторений анимации

Управляет количеством повторений анимации. Используйте infinite для непрерывного зацикливания.

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

Направление анимации

Управляет направлением воспроизведения в чередующихся циклах:

  • normal — каждый цикл воспроизводится вперёд
  • reverse — воспроизводится назад
  • alternate — направление чередуется: вперёд, затем назад
  • alternate-reverse — сначала назад, затем вперёд
<div class="bounce"></div>

Режим заполнения анимации

Определяет, что происходит с элементом до начала анимации и после её завершения:

  • none — значение по умолчанию, возврат к исходному состоянию
  • forwards — после завершения сохраняется последний ключевой кадр
  • backwards — во время задержки применяется первый ключевой кадр
  • both — применяются оба режима: до и после анимации

Режим сохранения конечного состояния

Самый распространённый вариант — оставить элемент в конечном состоянии анимации после её завершения:

<p class="item">I fade in and stay visible</p>

Режим начального состояния во время задержки

Если задана задержка, backwards переводит элемент в состояние первого ключевого кадра на время задержки. Это предотвращает появление исходного состояния перед началом анимации:

<p class="item">Starts invisible during the delay</p>

Режим сохранения начального и конечного состояний

both объединяет режимы forwards и backwards — это наиболее предсказуемый вариант для анимированных элементов, которые не должны внезапно появляться до или после анимации.

Задержка анимации

Откладывает начало анимации. Отрицательные задержки запускают анимацию с середины — это удобно для синхронизации нескольких анимаций:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

Каскадный запуск анимаций

Каскадный запуск только средствами CSS с задержками для дочерних элементов:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>

Приостановка и возобновление

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

<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>

Сброс анимаций

Чтобы повторно запустить анимацию CSS, удалите и снова добавьте класс. Браузер использует специальный приём: между удалением и добавлением принудительно выполняется перекомпоновка.

<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>

Отрицательная задержка анимации

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

<div class="star"></div>
<div class="star"></div>
<div class="star"></div>

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

Какое значение режима заполнения анимации оставляет элемент в состоянии последнего ключевого кадра после завершения анимации?

Повторение

animation-iteration-count: infinite зацикливает анимацию навсегда. animation-direction: alternate заставляет её двигаться туда-обратно. animation-fill-mode: forwards сохраняет конечное состояние. animation-fill-mode: both — самый безопасный вариант. Используйте отрицательные задержки для смещения синхронизированных анимаций.

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

Урок «Направление анимации, режим заполнения и итерации» бесплатный?

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

Чему я научусь в уроке «Направление анимации, режим заполнения и итерации»?

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

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

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

Сколько времени занимает урок «Направление анимации, режим заполнения и итерации»?

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

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

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

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

  1. Синтаксис @keyframes и свойство анимации
  2. Направление анимации, режим заполнения и итерации
  3. Связывание и последовательность анимаций
  4. Доступные анимации с prefers-reduced-motion
← Назад к CSS Academy