Jak udělat animace v CSS

Stránka, která se hýbe, působí živěji. Ukážeme si dva způsoby: přechod mezi stavy a animaci, která běží sama od sebe. Nic složitého, jen dvě pravidla a pár vlastností.

Dva způsoby: přechod a animace

Přechod (transition) už znáte z tlačítek. Změní vlastnost ve chvíli, kdy nastane událost, třeba najetí myší. Animace (animation) běží sama od sebe, bez události, a může se opakovat donekonečna.

Keyframes: co se má dít

Animaci popíšete pravidlem @keyframes. Určíte stavy v procentech průběhu: 0 % je začátek, 100 % konec:

@keyframes pulz {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

Jméno pulz si zvolíte sami. Samo o sobě ale nic nedělá, je to jen popis. Teprve když ho připojíte k prvku, animace začne.

Připojení animace k prvku

.ikona {
  animation-name: pulz;                /* které pravidlo použít */
  animation-duration: 2s;              /* jak dlouho trvá jeden cyklus */
  animation-iteration-count: infinite; /* opakovat donekonečna */
}

Stejný zápis lze zkrátit na jediný řádek: animation: pulz 2s infinite;. Výsledek vidíte v náhledu:

Plynulost: timing-function

Vlastnost animation-timing-function určuje, jak se rychlost mění. linear jede stejnou rychlostí, ease-in-out začíná pomalu, zrychlí uprostřed a na konci zase zpomalí. Pro přirozený pohyb se hodí právě ta druhá:

animation-timing-function: ease-in-out;

Jednorázové objevení karty

Po doběhnutí animace se obvykle prvek vrátí na začátek. Pokud má zůstat v konečném stavu, použijte animation-fill-mode: forwards. Hezký vzor je karta, která se při načtení stránky jemně vysune:

.uvod {
  animation: vysun 0.6s ease-out forwards;
}
@keyframes vysun {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

Časté chyby

• Zapomenuté připojení. @keyframes samo o sobě nic nespustí, musíte ho připojit přes animation-name nebo zkratku animation.
• Chybějící délka. Výchozí délka je 0s, takže animace proběhne okamžitě a nic nevidíte.
• Animovat všechno najednou. Příliš mnoho pohybu rozptyluje. Animujte jen to, na čem záleží.
• Těžké vlastnosti. Nejlépe se hýbou transform a opacity. Prohlížeč je počítá rychle, kdežto změny width nebo top přepočítávají rozvržení celé stránky.

Teď umíte oživit prvky na stránce bez JavaScriptu. Pokud chcete reagovat na kliknutí nebo na posun stránky, k tomu slouží JavaScript v sekci JS. 👍