animation - Český CSS 3 manuál

HTML a CSS Manuál Ostatní vlastnosti 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

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 */

 

  Aktivity (2)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Miniatura
Všechny články v sekci
Ostatní CSS vlastnosti

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!