Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

animation - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti animation si můžeme vytvářet vlastní animace pomocí pouhého CSS. Pro vytvoření animace je potřebná základní znalost @keyframes.

Vlastnosti animace

  1. animation-name - Jméno animace
  2. animation-duration - Délka animace
  3. animation-timing-function - Způsob (a rychlost) animace
  4. animation-delay - Doba před spuštěním animace
  5. animation-iteration-count - Počet opakování animace
  6. animation-direction - Směr (a rychlost) animace
  7. animation-fill-mode - Nastavení chování elementu, když animace neprobíhá
  8. animation-play-state - Nastavení zda animace běží nebo ne

Popis všech atributů včetně kódů, stylů a ukázky najdete na uvedených odkazech.

Animace nedokáže dědit a podporují ji všechny nové prohlížeče.

Ukázka

Vytvořme si čtverec o velikosti 100px × 100px s modrou barvou. Animace čtverce bude postupně nastavovat všechny atributy a jejich vlastnosti. Tato animace se jménem posouvani bude posuvná a objíždět čtverec, bude se opakovat donekonečna, na start bude čekat 2 sekundy a před začátkem bude stát na místě, kde animace také začíná.

<!DOCTYPE html>
<html>
        <head>
                <style>
                div
                {
                        width: 100px;
                        height: 100px;
                        background-color: #3b94e0;
                        position: absolute;
                        animation-name: posouvani;
                        animation-duration: 4s;
                        animation-timing-function: ease;
                        animation-delay: 2s;
                        animation-iteration-count: infinite;
                        animation-direction: normal;
                        animation-fill-mode: backwards;
                        animation-play-state: running;
                }
                @keyframes posouvani
                {
                        0%, 100% { left: 100px; top: 100px; }
                        25% { left: 250px; top: 100px; }
                        50% { left: 250px; top: 250px; }
                        75% { left: 100px; top: 250px; }
                }
                </style>
                <title>animation</title>
        </head>
        <body>
                <div></div>
        </body>
</html>

Výsledek:

Animace v CSS 3 - Ostatní CSS vlastnosti

Minulý zápis je strašně dlouhý. Psát takto každou animaci, upsali bychom se. Naštěstí již víme, že se to dá zkrátit a to přesně v takovém pořadím jako je uvedené výše. Zkrácený zápis tedy bude vypadat takto:

animation: posouvani 4s ease 2s infinite normal backwards running;

Výsledek je úplně stejný. Přesto je zápis ještě docela dlouhý. Můžeme si ho ještě zkrátit tím, že nebudeme definovat poslední vlastnost, protože výchozí hodnota animation-play-state je právě running.

animation: posouvani 4s ease 2s infinite normal backwards;

Poznámka

Správně by se měly všechny vlastnosti animace (včetně animation) psát bez prefixu a s prefixem -webkit- a -moz-. Nové verze skoro všech prohlížečů však podporují i verzi bez prefixu. Pokud byste však chtěli mít animace i pro trochu starší prohlížeče, minulý krátký zápis animace by vypadal takto:

animation: posouvani 4s ease 2s infinite normal backwards;
-webkit-animation: posouvani 4s ease 2s infinite normal backwards;    /* Chrome, Safari, Opera */
-moz-animation: posouvani 4s ease 2s infinite normal backwards;       /* Mozilla Firefox */

 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity