CSS @keyframes; Полное руководство по созданию анимаций

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

Основы @keyframes

Правило @keyframes позволяет определить промежуточные состояния анимации. Оно задает, каким должно быть состояние элемента в определенные моменты времени.

Синтаксис @keyframes

Синтаксис правила @keyframes следующий:

@keyframes animation-name {
  from {
    /* начальное состояние */
  }
  to {
    /* конечное состояние */
  }
}

Или с использованием процентов для более точного контроля:

@keyframes animation-name {
  0% {
    /* начальное состояние */
  }
  50% {
    /* промежуточное состояние */
  }
  100% {
    /* конечное состояние */
  }
}

Пример использования

Рассмотрим простой пример анимации изменения цвета и перемещения элемента:

@keyframes example {
  0% {
    background-color: red;
    left: 0;
  }
  50% {
    background-color: yellow;
    left: 50px;
  }
  100% {
    background-color: green;
    left: 100px;
  }
}

.animated-element {
  position: relative;
  animation: example 4s infinite;
}

В этом примере анимация example изменяет цвет фона элемента с красного на желтый, затем на зеленый, и перемещает элемент слева направо.

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

Свойства анимации

Чтобы применить анимацию, описанную в @keyframes, необходимо использовать несколько CSS-свойств:

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

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

.animated-element {
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

Создание сложных анимаций

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

Пульсирующий эффект

Создание эффекта пульсации:

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

.pulse-element {
  animation: pulse 2s infinite;
}

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

Создание эффекта вращения:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotate-element {
  animation: rotate 3s linear infinite;
}

Комбинированные анимации

Комбинирование нескольких анимаций для создания сложных эффектов:

@keyframes move-and-rotate {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(50px) rotate(180deg);
  }
  100% {
    transform: translateX(0) rotate(360deg);
  }
}

.combined-element {
  animation: move-and-rotate 4s ease-in-out infinite;
}

Советы и рекомендации

1. Оптимизация производительности. Используйте свойство will-change для оптимизации рендеринга:

   .optimized-element {
     will-change: transform, opacity;
   }
   

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

3. Проверка совместимости. Убедитесь, что ваши анимации корректно работают в различных браузерах.

Заключение

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

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