CSS animace

CSS umožňuje vytvářet jednoduché animace zcela bez JavaScriptu.

V JavaScriptu můžeme CSS animace řídit nebo je vylepšit krátkým kódem.

CSS přechody

Myšlenka CSS přechodů je jednoduchá. Uvedeme vlastnost a způsob, jak se mají animovat její změny. Když se vlastnost změní, prohlížeč vykreslí animaci.

To znamená, že nám stačí změnit vlastnost a prohlížeč zobrazí plynulý přechod.

Například následující CSS animace mÄ›ní vlastnost background-color bÄ›hem 3 sekund:

.animováno {
  transition-property: background-color;
  transition-duration: 3s;
}

Když nyní má nÄ›jaký element třídu .animováno, každá zmÄ›na jeho background-color bude animována v průbÄ›hu 3 sekund.

Kliknutím na následující tlačítko spustíte animaci jeho pozadí:

<button id="barva">Klikněte na mě</button>

<style>
  #barva {
    transition-property: background-color;
    transition-duration: 3s;
  }
</style>

<script>
  barva.onclick = function() {
    this.style.backgroundColor = 'red';
  };
</script>

K popisu CSS přechodů slouží 4 vlastnosti:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

Probereme je za okamžik. Prozatím poznamenejme, že společná vlastnost transition umožňuje deklarovat vÅ¡echny najednou v poÅ™adí: property duration timing-function delay, stejnÄ› jako animovat více vlastností současnÄ›.

Například toto tlačítko animuje vlastnosti color a font-size:

<button id="rostoucí">Klikněte na mě</button>

<style>
#rostoucí {
  transition: font-size 3s, color 2s;
}
</style>

<script>
rostoucí.onclick = function() {
  this.style.fontSize = '36px';
  this.style.color = 'red';
};
</script>

Nyní probereme animační vlastnosti jednu po druhé.

transition-property

Ve vlastnosti transition-property uvádíme seznam vlastností, které mají být animovány, například: left, margin-left, height, color. Nebo můžeme napsat all, což znamená „animovat vÅ¡echny vlastnosti“.

Všimněte si však, že existují vlastnosti, které animovat nelze. Nicméně většina obecně užívaných vlastností je animovatelná.

transition-duration

Ve vlastnosti transition-duration můžeme specifikovat, jak dlouho má animace trvat. ÄŒas by mÄ›l být v časovém formátu CSS: v sekundách s nebo milisekundách ms.

transition-delay

Ve vlastnosti transition-delay můžeme specifikovat prodlevu pÅ™ed animací. Například pokud transition-delay je 1s a transition-duration je 2s, pak se animace spustí 1 sekundu po zmÄ›nÄ› vlastnosti a její celková doba trvání budou 2 sekundy.

Povoleny jsou i záporné hodnoty. Pak se animace spustí okamžitÄ›, ale její počáteční bod bude v zadané hodnotÄ› (čase). Například pokud transition-delay je -1s a transition-duration je 2s, spustí se animace pÅ™esnÄ› od poloviny a bude trvat celkem 1 sekundu.

Následující animace posouvá čísla od 0 do 9 pomocí CSS vlastnosti translate:

pás.onclick = function() {
  pás.classList.add('animace');
};

#číslice {
  width: .5em;
  overflow: hidden;
  font: 32px monospace;
  cursor: pointer;
}

#pás {
  display: inline-block
}

#pás.animace {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: linear;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  Kliknutím sem spustíte animaci:

  <div id="číslice"><div id="pás">0123456789</div></div>

  <script src="script.js"></script>
</body>

</html>

Vlastnost transform se animuje následovnÄ›:

#pás.animace {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
}

V uvedeném příkladu JavaScript pÅ™idá elementu třídu .animace – a animace začne:

pás.classList.add('animace');

Pomocí záporné transition-delay bychom mohli také začít nÄ›kde uprostÅ™ed pÅ™echodu, od určitého čísla, napÅ™. odpovídajícího aktuální sekundÄ›.

Když zde kliknete na číslici, animace se spustí od aktuální sekundy:

pás.onclick = function() {
  let sekunda = new Date().getSeconds() % 10;
  pás.style.transitionDelay = '-' + sekunda + 's';
  pás.classList.add('animace');
};

#číslice {
  width: .5em;
  overflow: hidden;
  font: 32px monospace;
  cursor: pointer;
}

#pás {
  display: inline-block
}

#pás.animace {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: linear;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  Kliknutím sem spustíte animaci:
  <div id="číslice"><div id="pás">0123456789</div></div>

  <script src="script.js"></script>
</body>
</html>

JavaScript to provádí řádkem navíc:

pás.onclick = function() {
  let sekunda = new Date().getSeconds() % 10;
  // například -3s zde spustí animaci od 3. sekundy
  pás.style.transitionDelay = '-' + sekunda + 's';
  pás.classList.add('animace');
};

transition-timing-function

Časovací funkce popisuje, jak je animační proces rozložen podél své časové linie. Zda začne pomalu a pak zrychlí, nebo naopak.

Na první pohled vypadá jako nejsložitější vlastnost, ale pokud jí věnujete trochu času, začne vám připadat velice jednoduchá.

Tato vlastnost přijímá dva druhy hodnot: Bézierovu křivku nebo kroky. Začneme křivkou, jelikož ta se používá častěji.

Bézierova křivka

Časovací funkce může být nastavena jako Bézierova křivka se 4 řídícími body, které splňují tyto podmínky:

1. První řídící bod je (0,0).
2. Poslední řídící bod je (1,1).
3. Hodnota x mezilehlých bodů musí být v intervalu 0..1, y může být jakákoli.

Syntaxe Bézierovy kÅ™ivky v CSS: cubic-bezier(x2, y2, x3, y3). Zde musíme specifikovat jen 2. a 3. řídící bod, protože první je pevnÄ› stanoven jako (0,0) a čtvrtý jako (1,1).

Časovací funkce popisuje, jak rychle animační proces probíhá.

• Osa x pÅ™edstavuje čas: 0 – začátek, 1 – konec transition-duration.
• Osa y specifikuje míru dokončení procesu: 0 – počáteční hodnota vlastnosti, 1 – konečná hodnota.

Nejjednodušší varianta je ta, kdy animace probíhá rovnomÄ›rnÄ›, stále stejnou lineární rychlostí. To můžeme specifikovat kÅ™ivkou cubic-bezier(0, 0, 1, 1).

Tato křivka vypadá následovně:

…Jak vidíte, je to obyčejná přímka. Když probíhá čas (x), proces animace (y) rovnomÄ›rnÄ› pokračuje od 0 k 1.

V následujícím příkladu jede vláček zleva doprava stálou rychlostí (klikněte na něj):

.vláček {
  position: relative;
  cursor: pointer;
  width: 177px;
  height: 160px;
  left: 0;
  transition: left 5s cubic-bezier(0, 0, 1, 1);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <img class="vláček" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">

</body>

</html>

CSS vlastnost transition je založena na této kÅ™ivce:

.vláček {
  left: 0;
  transition: left 5s cubic-bezier(0, 0, 1, 1);
  /* kliknutí na vláček nastaví vlastnost left na 450px, čímž spustí animaci */
}

…A jak můžeme zobrazit zpomalující vláček?

Můžeme použít jinou Bézierovu kÅ™ivku: cubic-bezier(0.0, 0.5, 0.5 ,1.0).

Graf:

Jak vidíme, proces začíná rychle: křivka strmě vzroste, ale pak zpomaluje a zpomaluje.

Časovací funkce v akci (klikněte na vláček):

.vláček {
  position: relative;
  cursor: pointer;
  width: 177px;
  height: 160px;
  left: 0px;
  transition: left 5s cubic-bezier(0.0, 0.5, 0.5, 1.0);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <img class="vláček" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">

</body>

</html>

CSS:

.vláček {
  left: 0;
  transition: left 5s cubic-bezier(0, .5, .5, 1);
  /* kliknutí na vláček nastaví vlastnost left na 450px, čímž spustí animaci */
}

Existuje nÄ›kolik vestavÄ›ných kÅ™ivek: linear, ease, ease-in, ease-out a ease-in-out.

linear je zkratka pro cubic-bezier(0, 0, 1, 1) – přímku, jakou jsme popsali výše.

Další názvy jsou zkratky pro následující cubic-bezier:

ease*	ease-in	ease-out	ease-in-out
(0.25, 0.1, 0.25, 1.0)	(0.42, 0, 1.0, 1.0)	(0, 0, 0.58, 1.0)	(0.42, 0, 0.58, 1.0)

* – není-li uvedena časovací funkce, standardnÄ› se používá ease.

Pro náš zpomalující vláček bychom tedy mohli použít ease-out:

.vláček {
  left: 0;
  transition: left 5s ease-out;
  /* totéž jako transition: left 5s cubic-bezier(0, .5, .5, 1); */
}

Vypadá to však trochu jinak.

Bézierova křivka může způsobit, že animace překročí svůj rozsah.

Řídící body kÅ™ivky mohou mít jakékoli souÅ™adnice y, dokonce záporné nebo obrovské. Pak se i Bézierova kÅ™ivka roztáhne velmi nízko nebo vysoko a způsobí, že animace opustí svůj obvyklý rozsah.

Následující příklad obsahuje tento animační kód:

.vláček {
  left: 100px;
  transition: left 5s cubic-bezier(.5, -1, .5, 2);
  /* kliknutí na vláček nastaví vlastnost left na 450px */
}

Vlastnost left by mÄ›la být animována od 100px do 400px.

Když však kliknete na vláček, uvidíte tohle:

• Nejprve vláček jede dozadu: left poklesne pod 100px.
• Pak jede dopÅ™edu, o nÄ›co dál než 400px.
• A pak znovu zpÄ›t – na 400px.

.vláček {
  position: relative;
  cursor: pointer;
  width: 177px;
  height: 160px;
  left: 100px;
  transition: left 5s cubic-bezier(.5, -1, .5, 2);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <img class="vláček" src="https://js.cx/clipart/train.gif" onclick="this.style.left='400px'">

</body>

</html>

Proč se tak děje, nám bude zcela jasné, když se podíváme na graf zadané Bézierovy křivky:

SouÅ™adnici y druhého bodu jsme nastavili pod nulu a tÅ™etího bodu nad 1, takže kÅ™ivka vybÄ›hla ze svého „běžného“ kvadrantu. SouÅ™adnice y je mimo „standardní“ rozsah 0..1.

Jak víme, y znamená „míru dokončení procesu animace“. Hodnota y = 0 odpovídá počáteční hodnotÄ› vlastnosti a hodnota y = 1 koncové hodnotÄ›. Hodnoty y<0 tedy posunují vlastnost pÅ™ed počáteční left a hodnoty y>1 za koncovou left.

To je samozÅ™ejmÄ› „mÄ›kká“ varianta. Jestliže nastavíme hodnoty y tÅ™eba na -99 a 99, pak vláček vyskočí z rozsahu mnohem dál.

Jak ale vytvoříme Bézierovu křivku pro specifický úkol? K tomu existuje mnoho nástrojů.

• Můžeme to například udÄ›lat na stránce https://cubic-bezier.com.
• Také prohlížečové vývojářské nástroje mají zvláštní podporu pro Bézierovy kÅ™ivky v CSS:
  1. Otevřete si vývojářské nástroje klávesou F12 (Mac: Cmd+Opt+I).
  2. Zvolte záložku Elements (Prvky) a vÄ›nujte pozornost subpanelu Styles (Styly) na pravé stranÄ›.
  3. CSS vlastnosti se slovem cubic-bezier budou mít pÅ™ed tímto slovem ikonu.
  4. Po kliknutí na tuto ikonu můžete editovat křivku.

Kroky

ÄŒasovací funkce steps(počet kroků[, start/end]) umožňuje rozdÄ›lit pÅ™echod do více kroků.

Podívejme se na to v příkladu s číslicemi.

Zde je seznam číslic bez jakýchkoli animací, jen jako zdroj:

#číslice {
  border: 1px solid red;
  width: 1.2em;
}

#pás {
  display: inline-block;
  font: 32px monospace;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div id="číslice"><div id="pás">0123456789</div></div>

</body>
</html>

V HTML je pás číslic uzavÅ™en do <div id="číslice"> pevné délky:

<div id="číslice">
  <div id="pás">0123456789</div>
</div>

Element #digit má pevnou šířku a ohraničení, proto vypadá jako červené okno.

Vytvoříme časovač: číslice se budou objevovat nespojitě jedna po druhé.

Abychom toho docílili, skryjeme #pás mimo #číslice pomocí overflow: hidden a pak budeme #pás posunovat doleva krok za krokem.

Bude to mít 9 kroků, pro každou číslici jeden krok-posun:

#pás.animate  {
  transform: translate(-90%);
  transition: transform 9s steps(9, start);
}

První argument funkce steps(9, start) je počet kroků. PÅ™echod bude rozdÄ›len na 9 částí (každá 10%). ÄŒasový interval se rovněž automaticky rozdÄ›lí na 9 částí, takže transition: 9s nám dává 9 sekund na celou animaci – 1 sekundu na každou číslici.

Druhý argument je jedno ze dvou slov: start nebo end.

start znamená, že první krok potÅ™ebujeme udÄ›lat okamžitÄ› na začátku animace.

V akci:

#číslice {
  width: .5em;
  overflow: hidden;
  font: 32px monospace;
  cursor: pointer;
}

#pás {
  display: inline-block
}

#pás.animace {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: steps(9, start);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  Kliknutím sem spustíte animaci:

  <div id="číslice"><div id="pás">0123456789</div></div>

  <script>
    číslice.onclick = function() {
      pás.classList.add('animace');
    }
  </script>


</body>

</html>

Po kliknutí se číslice okamžitÄ› zmÄ›ní na 1 (první krok) a pak se zmÄ›ní na začátku další sekundy.

Proces postupuje následovně:

• 0s – -10% (první zmÄ›na na začátku 1. sekundy, okamžitÄ›)
• 1s – -20%
• …
• 8s – -90%
• (poslední sekunda ukazuje konečnou hodnotu.)

První zmÄ›na zde probÄ›hla okamžitÄ› v důsledku start ve steps.

Druhá možná hodnota end by znamenala, že zmÄ›na se nebude aplikovat na začátku, ale na konci každé sekundy.

Proces pro steps(9, end) tedy bude probíhat takto:

• 0s – 0 (bÄ›hem první sekundy se nic nezmÄ›ní)
• 1s – -10% (první zmÄ›na na konci 1. sekundy)
• 2s – -20%
• …
• 9s – -90%

Následuje steps(9, end) v akci (vÅ¡imnÄ›te si prodlevy pÅ™ed první zmÄ›nou číslice):

#číslice {
  width: .5em;
  overflow: hidden;
  font: 32px monospace;
  cursor: pointer;
}

#pás {
  display: inline-block
}

#pás.animace {
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: steps(9, end);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  Kliknutím sem spustíte animaci:

  <div id="číslice"><div id="pás">0123456789</div></div>

  <script>
    číslice.onclick = function() {
      pás.classList.add('animace');
    }
  </script>


</body>

</html>

Pro steps(...) existují i nÄ›které pÅ™eddefinované zkratky:

• step-start – totéž jako steps(1, start). To znamená, že animace začne okamžitÄ› a bude trvat 1 krok. Začne a skončí tedy okamžitÄ›, jako by žádná animace nebyla.
• step-end – totéž jako steps(1, end): vykoná animaci v jediném kroku na konci transition-duration.

Tyto hodnoty se používají málokdy, jelikož nepředstavují skutečnou animaci, ale jednokrokovou změnu. Uvádíme je jen pro úplnost.

Událost: „transitionend“

Když CSS animace skončí, spustí se událost transitionend.

Zhusta se používá k provedení akce po skončení animace. Můžeme také spojovat animace.

Například loď v následujícím příkladu začne po kliknutí plout sem a tam, pokaždé dál a dál doprava:

Animaci spustila funkce pluj, která se znovu spouÅ¡tí pokaždé, když pÅ™echod skončí, a obrátí smÄ›r plavby:

boat.onclick = function() {
  //...
  let kolikrát = 1;

  function pluj() {
    if (kolikrát % 2) {
      // plujeme doprava
      boat.classList.remove('back');
      boat.style.marginLeft = 100 * kolikrát + 200 + 'px';
    } else {
      // plujeme doleva
      boat.classList.add('back');
      boat.style.marginLeft = 100 * kolikrát - 200 + 'px';
    }

  }

  pluj();

  boat.addEventListener('transitionend', function() {
    kolikrát++;
    pluj();
  });
};

Objekt události transitionend má dvÄ› specifické vlastnosti:

událost.propertyName

Vlastnost, jejíž animace skončila. Může se hodit, když animujeme více vlastností současně.

událost.elapsedTime

Doba trvání animace (v sekundách) bez transition-delay.

Keyframes

Pomocí CSS pravidla @keyframes můžeme spojit více jednoduchých animací dohromady.

Specifikuje „název“ animace a pravidla – co, kdy a kde animovat. Pak můžeme pomocí vlastnosti animation pÅ™ipojit animaci k elementu a specifikovat její další parametry.

Následuje příklad s vysvětlením:

<div class="postup"></div>

<style>
  @keyframes pluj-zleva-doprava {   /* pojmenujeme ji: "pluj-zleva-doprava" */
    from { left: 0px; }             /* začátek animace left: 0px */
    to { left: calc(100% - 50px); } /* konec animace left: 100%-50px */
  }

  .postup {
    animation: pluj-zleva-doprava 3s infinite alternate;
    /* aplikujeme animaci "pluj-zleva-doprava" na element
       trvání 3 sekundy
       počet opakování: nekonečný (infinite)
       pokaždé změní směr (alternate)
    */

    position: relative;
    border: 2px solid green;
    width: 50px;
    height: 20px;
    background: lime;
  }
</style>

O @keyframes existuje mnoho článků a detailní specifikace.

PravdÄ›podobnÄ› nebudete potÅ™ebovat @keyframes často, pokud na vaÅ¡ich stránkách není vÅ¡echno v neustálém pohybu.

Výkonnost

VÄ›tÅ¡inu CSS vlastností je možné animovat, protože vÄ›tÅ¡ina z nich má číselné hodnoty. Například width, color, font-size jsou vÅ¡echny čísla. Když je budete animovat, prohlížeč postupnÄ› tato čísla mÄ›ní krok za krokem, čímž vytváří plynulý efekt.

Ne všechny animace však budou vypadat tak hladce, jak byste si přáli, protože změna různých CSS vlastností trvá různou dobu.

Technické podrobnosti jsou takové, že když nastane změna stylu, prohlížeč projde 3 fáze, aby zobrazil nový vzhled:

1. Layout (rozložení): přepočítá geometrii a pozici každého elementu, pak
2. Paint (kreslení): přepočítá, jak má všechno vypadat na svých místech, včetně pozadí a barev,
3. Composite (složení): zobrazí konečné výsledky do pixelů na obrazovce a aplikuje CSS přechody, pokud nějaké jsou.

BÄ›hem CSS animace se tento proces opakuje v každém snímku. AvÅ¡ak CSS vlastnosti, které nemají vliv na geometrii nebo pozici, napÅ™. color, mohou pÅ™eskočit fázi rozložení. Pokud se zmÄ›ní color, prohlížeč nepočítá žádnou novou geometrii a jde rovnou na kreslení → složení. Existuje i nÄ›kolik vlastností, které pÅ™echázejí přímo ke složení. Delší seznam CSS vlastností a fází, které spouÅ¡tÄ›jí, najdete na https://csstriggers.com.

Tyto výpočty mohou nějakou dobu trvat, zejména na stránkách s mnoha elementy a složitým rozložením. A na většině zařízení jsou tyto prodlevy viditelné, což vede k „trhání“, méně plynulým animacím.

Animace vlastností, které přeskakují fázi rozložení, jsou rychlejší. Ještě lepší je, když je přeskočeno i kreslení.

Vlastnost transform je skvÄ›lá volba, protože:

• CSS pÅ™echody ovlivňují box cílového elementu jako celek (otáčejí ho, obracejí, roztahují, pÅ™esunují).
• CSS pÅ™echody nikdy neovlivňují sousední elementy.

…Prohlížeče tedy aplikují transform „nad“ existujícími výpočty rozložení a kreslení, ve fázi složení.

Jinými slovy, prohlížeč vypočítá rozložení (velikosti, pozice), ve fázi kreslení vykreslí barvy, pozadí atd., a pak aplikuje transform na boxy elementů, které ji potÅ™ebují.

ZmÄ›ny (animace) vlastnosti transform nikdy nevyvolají kroky rozložení a kreslení. KromÄ› toho prohlížeč využívá pro CSS pÅ™echody grafický akcelerátor (speciální čip na CPU nebo grafické kartÄ›), díky čemuž jsou velmi efektivní.

NaÅ¡tÄ›stí je vlastnost transform velmi silná. Používáním transform na elementu jej můžete otáčet, pÅ™evracet, roztahovat a zmenÅ¡ovat, pÅ™esunovat a mnoho dalšího. Místo vlastností left/margin-left tedy můžeme použít transform: translateX(…), pro zvÄ›tÅ¡ování elementu můžeme použít transform: scale atd.

Rovněž vlastnost opacity nikdy nespustí rozložení (v Mozille Gecku pÅ™eskakuje i kreslení). Můžeme ji používat pro efekty zobrazení/skrytí nebo zjevování/mizení.

Spojení transform a opacity nám obvykle dokáže vyÅ™eÅ¡it vÄ›tÅ¡inu naÅ¡ich potÅ™eb a poskytnout plynulé, pÄ›knÄ› vypadající animace.

Například zde kliknutím na element #loď pÅ™idáte třídu s transform: translateX(300px) a opacity: 0, což pÅ™imÄ›je loď pÅ™esunout se o 300px doprava a zmizet:

<img src="https://js.cx/clipart/boat.png" id="loď">

<style>
#loď {
  cursor: pointer;
  transition: transform 2s ease-in-out, opacity 2s ease-in-out;
}

.posun {
  transform: translateX(300px);
  opacity: 0;
}
</style>
<script>
  loď.onclick = () => loď.classList.add('posun');
</script>

Následující příklad je složitÄ›jší a obsahuje @keyframes:

<h2 onclick="this.classList.toggle('animated')">kliknutí sem spustí / zastaví animaci</h2>
<style>
  .animated {
    animation: hello-goodbye 1.8s infinite;
    width: fit-content;
  }
  @keyframes hello-goodbye {
    0% {
      transform: translateY(-60px) rotateX(0.7turn);
      opacity: 0;
    }
    50% {
      transform: none;
      opacity: 1;
    }
    100% {
      transform: translateX(230px) rotateZ(90deg) scale(0.5);
      opacity: 0;
    }
  }
</style>

Shrnutí

CSS animace umožňují plynulé (nebo krokové) animované změny jedné nebo více CSS vlastností.

Hodí se pro většinu animačních úloh. Pro animace můžeme používat i JavaScript. Tomu je věnována příští kapitola.

Omezení CSS animací ve srovnání s JavaScriptovými animacemi:

V počátečních příkladech v naší kapitole jsme animovali font-size, left, width, height atd. Ve skutečných projektech bychom mÄ›li pro lepší výkon používat transform: scale() a transform: translate().

VÄ›tÅ¡inu animací lze implementovat pomocí CSS podle popisu v této kapitole. Událost transitionend umožňuje po skončení animace spustit JavaScript, takže se dobÅ™e integruje s kódem.

V následující kapitole však budeme provádět animace v JavaScriptu, abychom pokryli složitější případy.