Синтаксис @keyframes и свойство анимации
Определяйте этапы анимации с помощью @keyframes и применяйте их через сокращённую запись animation.
«Синтаксис @keyframes и свойство анимации» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое анимации CSS
Анимации CSS позволяют изменять свойства в несколько этапов с течением времени с помощью @keyframes. В отличие от переходов, анимации запускаются автоматически или при добавлении класса и поддерживают сложные последовательности.
Синтаксис @keyframes
Задавайте этапы анимации с помощью процентов (от 0% до 100%) или ключевых слов from/to:
<div class="fade-demo">Fades in</div>
<div class="pulse-demo"></div>
Свойство анимации
Применяйте анимацию к элементу с помощью сокращённой записи animation или её отдельных свойств:
<h1 class="hero-text">Welcome!</h1>
Имя анимации
Ссылается на правило @keyframes по его имени:
<div class="spinner"></div>
Длительность анимации
Задаёт продолжительность одного цикла анимации:
<div class="pulse"></div>
Несколько этапов анимации
Используйте ключевые кадры с процентами для сложных многоэтапных анимаций:
<div class="slide-demo">Sliding in</div>
Анимация нескольких свойств
На каждом этапе ключевых кадров можно одновременно анимировать несколько свойств:
<div class="bounce-demo"></div>
Функция синхронизации для каждого ключевого кадра
Функцию синхронизации можно задать для каждого этапа ключевых кадров. В таком случае она управляет сглаживанием перехода между отдельными точками, а не всей анимацией.
Несколько анимаций
Применяйте к одному элементу несколько анимаций, разделяя значения запятыми:
<div class="element">Two animations combined</div>
Состояние анимации
Динамически приостанавливайте и возобновляйте анимации:
<div class="card">Hover the card to pause<div class="spinner"></div></div>
Сводка: анимации CSS и переходы
Выбирайте подходящий вариант:
- Переход: два состояния, запускается при изменении состояния, простой
- Анимация: несколько этапов, запускается самостоятельно, может зацикливаться, предоставляет больше возможностей управления
Быстрая проверка
Какое ключевое слово @keyframes обозначает начальное состояние анимации?
Повторение
Задавайте этапы анимации с помощью @keyframes, используя from/to или процентные точки. Применяйте их с помощью сокращённой записи animation, указывая имя, длительность, синхронизацию и режим заполнения. Несколько анимаций разделяются запятыми. Используйте переходы для простых изменений между двумя состояниями, а анимации — для сложных последовательностей.
Часто задаваемые вопросы
Урок «Синтаксис @keyframes и свойство анимации» бесплатный?
Да — полный текст урока «Синтаксис @keyframes и свойство анимации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Синтаксис @keyframes и свойство анимации»?
Определяйте этапы анимации с помощью @keyframes и применяйте их через сокращённую запись animation. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Синтаксис @keyframes и свойство анимации»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Синтаксис @keyframes и свойство анимации
- Направление анимации, режим заполнения и итерации
- Связывание и последовательность анимаций
- Доступные анимации с prefers-reduced-motion