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
- animation-name - Jméno animace
- animation-duration - Délka animace
- animation-timing-function - Způsob (a rychlost) animace
- animation-delay - Doba před spuštěním animace
- animation-iteration-count - Počet opakování animace
- animation-direction - Směr (a rychlost) animace
- animation-fill-mode - Nastavení chování elementu, když animace neprobíhá
- 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:
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 */
