Анимации в CSS: keyframes, animation-name, duration, timing-function и др.

🔥 Введение в CSS-анимации: магия движения

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

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

.box {
  width: 100px;
  height: 100px;
  background: coral;
  animation: pulse 2s infinite;
}

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

💡 pulse — имя анимации, 2s — длительность, infinite — бесконечное повторение.

🎬 Основные свойства анимации

1. animation-name

Указывает имя ключевых кадров (@keyframes), которые описывают анимацию.

2. animation-duration

Определяет, сколько времени займёт один цикл анимации (например, 2s или 500ms).

3. animation-timing-function

Контролирует скорость изменения свойств во времени: - ease (по умолчанию) — плавное ускорение и замедление. - linear — постоянная скорость. - cubic-bezier() — ручная настройка кривой.

.box {
  animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

4. animation-iteration-count

Число повторений (3, infinite).

5. animation-direction

Направление: - normal (по умолчанию) — от 0% до 100%. - reverse — от 100% до 0%. - alternate — меняет направление каждую итерацию.

🛠️ Расширенные свойства

1. animation-delay

Задержка перед стартом. Можно использовать для создания каскадных эффектов:

.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.4s; }

2. animation-fill-mode

Определяет, какие стили применяются до/после анимации: - none (по умолчанию) — стили только во время анимации. - forwards — сохраняет стили последнего ключевого кадра. - backwards — применяет стили первого кадра сразу.

3. animation-play-state

Позволяет приостанавливать анимацию (paused/running).

🎨 Создание сложных @keyframes

@keyframes — это сценарий анимации, где вы описываете, что происходит на определённых этапах (в процентах или ключевых словах from/to).

Пример: загрузочный спиннер

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

Пример: слайд-ин анимации

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

🧩 Комбинирование свойств: шорткат animation

Вместо перечисления всех свойств по отдельности используйте сокращённую запись:

.element {
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

Пример:

.button {
  animation: bounce 0.5s ease-in-out 0.2s 3 alternate;
}

🌟 Практический пример: оживляем кнопку

Создадим кнопку с эффектом «пульсации» при наведении:

.button {
  padding: 12px 24px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.button:hover {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

🚀 Советы от Данилы Бежина

1. Избегайте избыточных анимаций — они могут отвлекать пользователя.
2. Используйте will-change для оптимизации производительности: CSS .animated-element { will-change: transform, opacity; }
3. Тестируйте на мобильных устройствах — некоторые анимации могут работать иначе.

🔥 Профессиональный лайфхак: Для сложных последовательностей анимаций используйте JavaScript (например, Element.animate()), но CSS-анимации остаются лучшим выбором для большинства случаев.

📚 Что дальше?

Попробуйте поэкспериментировать:

• Анимация SVG-элементов.
• Создание параллакс-эффектов.
• Использование steps() в timing-function для покадровой анимации.

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

.typing-effect {
  animation: typing 3s steps(40) forwards;
}

Теперь вы готовы создавать потрясающие анимации, которые сделают ваш сайт живым и запоминающимся! 🎉