Руководство по директиве @keyframes в CSS

Веб-разработка выходит за рамки статических элементов. Анимации играют ключевую роль в улучшении пользовательского опыта, привлечении внимания и создании более интерактивных интерфейсов. Одним из самых мощных инструментов для создания анимаций в CSS является директива @keyframes. Она позволяет определять последовательность изменений стилей с течением времени, создавая сложные и впечатляющие визуальные эффекты. В этой статье мы погрузимся в мир @keyframes, рассмотрим его синтаксис, возможности и приведем примеры, которые помогут вам создавать захватывающие анимации. В конце статья я также оставил вам блок бесплатных материалов для обучения разработке.

Основы директивы @keyframes

Директива @keyframes позволяет определить анимацию, описав ключевые кадры и состояния, через которые проходит анимируемый элемент. Ключевые кадры задаются с помощью процентов или ключевых слов from и to, которые обозначают начало и конец анимации соответственно.

Синтаксис директивы @keyframes

Или с использованием процентов:

Директива @keyframes позволяет создавать анимации в CSS, добавляя интерактивность и динамику на веб-страницы. Однако, для создания плавных и привлекательных анимаций необходимо понимать, как работает анимация, как определять ключевые кадры и как оптимизировать анимации для лучшей производительности. Если вы хотите научиться создавать анимации и добавить интерактивности на свои веб-сайты, наш курс HTML и CSS станет для вас отличным помощником. На курсе 212 уроков и 19 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Пример базовой анимации

В этом примере анимация fadeIn делает элемент плавно видимым в течение 2 секунд.

Указание ключевых кадров

Ключевые кадры можно задавать с помощью процентов для создания более сложных анимаций.

В этом примере анимация bounce заставляет элемент прыгать, используя три ключевых кадра: начальное положение, верхнюю точку и возвращение к исходному положению.

Настройки анимации

Для управления анимацией используются различные свойства:

• animation-name — имя анимации, определённое в @keyframes.
• animation-duration — продолжительность анимации.
• animation-timing-function — функция временного распределения.
• animation-delay — задержка перед началом анимации.
• animation-iteration-count — количество повторений анимации.
• animation-direction — направление анимации.
• animation-fill-mode — поведение анимации до начала и после завершения.
• animation-play-state — состояние анимации (воспроизведение или пауза).

Пример настройки анимации

В этом примере элемент будет заезжать слева, анимация начнётся через 1 секунду, будет длиться 3 секунды, повторяться бесконечно, чередовать направления и сохранять конечное состояние.

Использование сокращённого синтаксиса

Свойства анимации можно задавать в сокращённой записи.

В этом примере анимация rotate вращает элемент на 360 градусов за 5 секунд бесконечно с линейной функцией времени.

Сложные примеры анимаций

Анимация вращения и изменения размера

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

Анимация изменения цвета и перемещения

В этом примере элемент будет перемещаться по горизонтали и изменять цвет фона.

Заключение

Директива @keyframes — это фундамент для создания впечатляющих анимаций в CSS. Она предоставляет полный контроль над визуальными изменениями элементов, позволяя добавлять динамику и оживлять веб-страницы. Освоив использование @keyframes, вы сможете создавать сложные, креативные и профессионально выглядящие анимации, которые улучшат взаимодействие пользователей с вашими веб-проектами. Экспериментируйте, изучайте и развивайте свои навыки анимации, чтобы создавать незабываемые впечатления для ваших пользователей.

Знание @keyframes открывает двери в мир веб-анимации, но для создания полноценных и интерактивных веб-сайтов необходимо владеть и другими техниками, такими как Flexbox, Grid и JavaScript. Чтобы получить комплексные навыки веб-разработки, рекомендуем вам наш курс HTML и CSS. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир HTML и CSS прямо сегодня.

Бесплатные полезности

1. Смотрите видео: код-ревью, собеседования и новости разработки на нашем Дзене – https://dzen.ru/purpleschool?tab=longs

2. Создайте личный план обучения и получите доступ к базе из 500+ бесплатных уроков в бесплатных картах развития на нашем сайте – https://purpleschool.ru/skills

3. Разберитесь в том, как устроен мир IT на бесплатном курсе «Основы разработки» – https://purpleschool.ru/course/code-basics