Генератор CSS-ключевых кадров

Четыре пресета

Fade slide

.animated {
  animation: fade-slide 0.6s ease both;
}

@keyframes fade-slide {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

Элемент проявляется, скользя снизу вверх.

Pulse

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: .8; }
}

Мягкий эффект дыхания, хорошо подходит для точек уведомлений и бейджей.

Spin

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

Полный оборот, полезен для индикаторов загрузки и иконок.

Bounce

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

Элемент подпрыгивает вверх и возвращается.

Почему transform и opacity?

Браузеры композитят transform и opacity на GPU без пересчёта раскладки и перерисовки, поэтому их анимация остаётся плавной. Пресеты намеренно избегают свойств, запускающих пересчёт раскладки.

Сокращённая запись animation

animation: fade-slide 0.6s ease both; читается так: анимация с именем fade-slide, длительностью 0.6 секунды, с функцией плавности ease по умолчанию. Режим заполнения both применяет начальное состояние до старта анимации и сохраняет конечное состояние после её завершения, поэтому элемент не мигает до движения и не дёргается назад после него.

Правила именования

• Используйте kebab-case, следуя конвенции CSS.
• Описывайте движение, а не элемент: fade-in-up лучше, чем alert-appear.
• Избегайте имён, которые могут конфликтовать со сторонними библиотеками.

Поддержка браузеров

@keyframes универсален и поддерживается всеми браузерами начиная с IE 10.