🎬 Полное руководство по CSS Animations

CSS Animations — это модуль CSS, который позволяет создавать анимации без JavaScript.

Два типа анимаций

• Transitions — плавные переходы между двумя состояниями
• Keyframes — сложные анимации с множеством кадров

transition создаёт плавный переход между состояниями элемента.

Синтаксис

transition: property duration timing-function delay;

Пример

.button {
  background: blue;
  transition: background 0.3s ease;
}

.button:hover {
  background: red;
}

.button {
  background: #667eea;
  color: white;
  padding: 15px 30px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.button:hover {
  background: #764ba2;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

transition-property — какое свойство анимировать.

• all — все свойства
• background — только фон
• transform — только трансформации

transition-duration — длительность анимации.

• 0.3s — 300 миллисекунд
• 1s — 1 секунда

transition-timing-function определяет кривую скорости анимации.

Значения

• ease — медленно в начале и конце (по умолчанию)
• linear — равномерно
• ease-in — медленно в начале
• ease-out — медленно в конце
• ease-in-out — медленно в начале и конце
• cubic-bezier() — кастомная кривая

.ease { transition: transform 1s ease; }
.linear { transition: transform 1s linear; }
.ease-in { transition: transform 1s ease-in; }
.ease-out { transition: transform 1s ease-out; }

@keyframes определяет ключевые кадры анимации.

Синтаксис

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

Можно использовать несколько точек:

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

.ball {
  animation: bounce 1s ease-in-out infinite;
}

animation применяет keyframes анимацию к элементу.

Синтаксис

animation: name duration timing-function delay iteration-count direction fill-mode;

Пример

.element {
  animation: slide 2s ease-in-out infinite;
}

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

.spinner {
  animation: rotate 2s linear infinite;
}

animation-iteration-count — сколько раз повторять анимацию.

• 1 — один раз
• 3 — три раза
• infinite — бесконечно

animation-direction — направление анимации.

• normal — вперёд
• reverse — назад
• alternate — вперёд-назад
• alternate-reverse — назад-вперёд

.once {
  animation: pulse 1s ease 1;
}

.three-times {
  animation: pulse 1s ease 3;
}

.infinite {
  animation: pulse 1s ease infinite;
}

Рассмотрим несколько практических примеров CSS анимаций.