CSS animace

Kromě přechodů transition existují i plnohodnotnější animace v čistém CSS. Podporováno od Internet Exploreru 10. Pro prohlížeče založené na Webkitu je nutnou používat prefix -webkit-.

Klíčové snímky (keyframes)

Animace se složí z jednotlivých klíčových snímků. Jednotlivé kroky mohou být buď znázorněny procenty, nebo v případě, kdy stačí jen dva stavy, lze místo procent použít klíčová slova from a to (ekvivalent 0% a 100%).

@keyframes jmeno-animace {
  0%   {background: blue}
  50% {background: yellow}
  100% {background: red}
}

Animace (animation)

Výše nadefinované klíčové snímky se přiřadí danému elementu, syntaxe je dost podobná vlastnosti transition:

element {
  animation: jmeno-animace 5s linear;
}

Vlastnost animation je zkrácenina všech animation-* vlastností. Název a doba trvání jsou povinné.

animation-name

Název animace, která se má selektoru přiřadit.

animation-duration
Délka animace, zadává se v sekundách (např. animation-duration: 1s).
animation-timing-function

Slouží k ovlivňování průběhu animace, tj. že se třeba ze začátku bude animovat rychle a konec animace bude pomalejší (výchozí hodnota ease). Nebo může být průběh lineární (linear).

Průběh (rychlost v jednotlivých fází) animace lze poměrně detailně nastavovat (Ukázka).

animation-delay

Nastavení zpoždění animace po jejím vyvolání. Čas se zadává rovněž v sekundách.

animation-iteration-count

Počet opakování dané animace. Výchozí hodnota je 1, jiným číslem lze požadovaný počet opakování, nekonečné přehrávání zajistí klíčové slovo infinite.

animation-direction

Směr animace, možné hodnoty jsou:

  • normal — výchozí hodnota; animace běží od 0% ke 100%, potom v případě opakování skočí na 0%,
  • reverse — animace běží od 100% k 0%, potom v případě opakování skočí na 100%,
  • alternate — má význam jen u více opakování a při každém změní svůj směr, tj. nejprve poběží z 0% ke 100%, potom se vrátí k 0%, zase poběží ke 100% a tak dále,
  • alternate-reverse — totéž jen se začne od 100%.
animation-fill-mode

Upřesňuje, zda se mají hodnoty prvního nebo posledního snímku projevovat i při skončení animace.

  • none — výchozí hodnota; před animováním s nic nemění, po skončení animace se vše vrátí k normálu,
  • forwards — po skončení animace zůstane stav posledního snímku,
  • backwards — v případě prodlevy před zahájením animace (animation-delay) se nastaví s předstihem hodnoty prvního snímku,
  • both — kombinace výše uvedeného.
animation-play-state

Umožňuje zastavení a opětovné spuštění animace.

  • running — výhozí hodnota; animace běží,
  • paused — animace je pozastavena, opětovné spuštění naváže v okamžiku předchozího pozastavení.

Více animací

Jeden element může používat animací více. Mají-li animation-* hodnoty být různé pro každou animaci zvlášť, hodnoty se oddělují čárkou (,).

element {animation: prvni-animace 5s, druha-animace 2s}

Vyvolání animace

Animace může být spuštěna třemi způsoby:

  1. ihned po načtení stránky — pokud by se výše uvedená animace přiřadila např. pro <h1>, po načtení nadpisy změní své pozadí,
  2. přes CSS pomocí selektorů uživatelské akce (:hover, :focus apod.),
  3. přidáním třídy JavaScriptem — animace se přiřadí speciální .třídě, kterou při nějaké akci nastaví JS.

Test animace

Prostor pro vyzkoušení (nefunguje ve starších Explorerech než 10).

Odkazy a zajímavé animace

Knihovny animací:

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

Will-change

Will-change

CSS vlastnost will-change dá prohlížeči najevo, že se s elementem bude něco dělat.

Animace

Animace na webových stránkách

Jak na webu vytvářet animace a přechody v HTML, CSS a JS.

Oříznutí textu

Oříznutí dlouhého textu

Má-li se delší text vyjít do přesného místa, je třeba kousek textu uříznout.

Komentáře