Generator animacji CSS

Anatomia animacji

@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;
}

Osiem właściwości w notacji skróconej: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Wybór easingów

Generator oferuje sześć funkcji easing:

Animuj właściwe właściwości

Przeglądarka może animować dowolną właściwość, ale tylko kilka z nich działa płynnie na GPU bez wywoływania layoutu lub malowania:

Tanie (tylko kompozycja): transform, opacity, filter.

Kosztowne (layout/malowanie): width, height, top, left, margin, padding, background-color.

Animacje z sześćdziesięcioma klatkami na sekundę na width i top są możliwe na małych elementach, ale na telefonie się zaczną przy dużej liczbie jednocześnie animowanych. Przy złożonym ruchu zawsze preferuj transform: translate(...) zamiast top / left oraz transform: scale(...) zamiast animowanej szerokości/wysokości.

will-change: używaj oszczędnie

Poinformowanie przeglądarki o wcześniejszym przydzieleniu warstwy kompozycji może poprawić płynność:

.card { will-change: transform; }

Ale to zużywa pamięć. Stosuj to tuż przed wyzwoleniem animacji i usuwaj po jej zakończeniu. Stałe ustawianie will-change: transform na wielu elementach może przynieść więcej szkody niż pożytku.

Ograniczenie ruchu

Niektórzy użytkownicy są wrażliwi na ruch i ustawiają preferencje systemowe:

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

Szanuj to ustawienie. Zaproponuj natychmiastową zmianę stanu lub bardzo subtelne zanikanie jako zamiennik.