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

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

Шаги для создания CSS-анимации:

1. Определите ключевые кадры с помощью @keyframes: Внутри этого правила вы указываете, какие стили применяются на каждом этапе анимации.
2. Примените анимацию к элементу: Используйте свойство animation для применения анимации к нужному элементу.

Пример анимации "пульсация":

Давайте создадим простую анимацию, которая будет заставлять элемент "пульсировать".

/* Шаг 1: Определим ключевые кадры */
@keyframes pulse {
  0% {
    transform: scale(1); /* Начальный размер */
    opacity: 1; /* Полная непрозрачность */
  }
  50% {
    transform: scale(1.1); /* Увеличение размера */
    opacity: 0.7; /* Прозрачность уменьшается */
  }
  100% {
    transform: scale(1); /* Возвращение к исходному размеру */
    opacity: 1; /* Полная непрозрачность */
  }
}

/* Шаг 2: Применим анимацию к элементу */
.pulsing-element {
  width: 100px; /* Ширина элемента */
  height: 100px; /* Высота элемента */
  background-color: #008cba; /* Цвет фона элемента */
  border-radius: 50%; /* Закругленные углы (для создания круга) */
  
  /* Анимация */
  animation: pulse 1.5s infinite; /* Имя анимации, длительность, повторение */
}

Использование в HTML:

Теперь вы можете использовать стиль .pulsing-element на элементе в вашем HTML.

<div class="pulsing-element"></div>

Объяснение кода:

• Правило @keyframes pulse определяет анимацию под названием pulse.
• В различных процентах (0%, 50% и 100%) мы определяем, как должен выглядеть элемент в каждой из точек анимации.
• Свойство transform: scale(1.1) увеличивает размер элемента на 10% в середине анимации.
• Свойство animation: pulse 1.5s infinite; применяется к элементу и указывает, что анимация должна длиться 1.5 секунды и повторяться бесконечно.

Заключение:

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