Анимации на CSS без JavaScript

В этой статье вы узнаете:

• как работают CSS-анимации,
• когда использовать transition, а когда @keyframes,
• примеры популярных эффектов,
• и советы по производительности.

Два способа анимировать элементы в CSS

Переходы transition

Работают при изменении свойства: наведение, фокус, активация.

button {
  background-color: #3498db;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #2980b9;
}

Плавный переход срабатывает при наведении.

Кадровые анимации keyframes

Полноценные анимации, управляемые временем:

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  animation: fadeIn 1s ease-in-out;
}

Анимация запускается автоматически при загрузке элемента.

Примеры популярных анимаций

Плавное появление

.fade-in {
  animation: fadeIn 0.8s ease forwards;
}

Кнопка с нажатием

button:active {
  transform: scale(0.95);
  transition: transform 0.1s;
}

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

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

.pulse {
  animation: pulse 1s infinite;
}

Карусель сдвига

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.slider {
  animation: slide 10s linear infinite;
}

Полезные параметры анимаций

• ease, linear, ease-in-out — скорость анимации
• infinite — бесконечный повтор
• forwards — сохраняет финальное состояние
• delay — задержка начала

Когда не стоит использовать анимации

• Если они мешают доступности (слишком быстрые или резкие)
• Когда можно использовать transform, а не top/left — выбирайте трансформации, они производительнее
• Если сайт должен быть строго корпоративным или минималистичным

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