Генератор CSS-анимации

Анатомия анимации

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

Восемь свойств в сокращённой записи: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Выбор easing

Генератор предлагает шесть функций easing:

Анимируйте правильные свойства

Браузер может анимировать любое свойство, но лишь немногие плавно идут на GPU, не вызывая пересчёт layout или перерисовку:

Дешёвые (только композиция): transform, opacity, filter.

Дорогие (layout/перерисовка): width, height, top, left, margin, padding, background-color.

Анимации с шестьюдесятью кадрами в секунду на width и top возможны на маленьких элементах, но на телефоне они захлебнутся, если анимировать много элементов сразу. Для сложного движения всегда предпочитайте transform: translate(...) вместо top / left и transform: scale(...) вместо анимированных ширины/высоты.

will-change: используйте экономно

Подсказка браузеру заранее выделить слой композиции может улучшить плавность:

.card { will-change: transform; }

Но это потребляет память. Применяйте её непосредственно перед запуском анимации и убирайте после завершения. Постоянное will-change: transform на многих элементах может принести больше вреда, чем пользы.

Уменьшение движения

Некоторые пользователи чувствительны к движению и задают системные настройки:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Уважайте эту настройку. Предложите мгновенное изменение состояния или очень лёгкое затухание как замену.