CSS Tutoriál XI. – Animace
V tomto díle se podíváme na novou záležitost CSS 3, a to animace, od kterých si tvůrci slibují nahrazení některých skriptů či dokonce obsahů, které by musely být přehrány pomocí nějakých pluginů. Tyto vlastnosti nejsou plnně podporovány Chrome a Safari, potřebují proto předponu -webkit- .
Animaci tvoříme pomocí vlastnosti @keyframes. Tato animace spočívá vlastně pouze v tom, že se objekt mění z jednoho stylu na další. První hodnotou, kterou zapíšeme je jméno animace. Za ní už píšeme průběh. Průběh označujeme pomocí procent. 0% = začátek animace a 100% je konec animace. Můžeme také pro začátek použít slovo „from“ a pro konec „to“. Znamenají totéž, co 0% a 100%. Pokud nastavíme například {0% {background-color:red;} } znamená to, že na začátku, bude prvek červený. Vlastností pro jednotlivé části animace může být kolik chceme. Měli bychom ale vždy jasně definovat, jak má vypadat prvek na začátku animace (0%) a jak na konci animace (100%). Zapíšeme si tedy nějakou jednoduchou animaci se změnou barev.
<head><style> @-webkit-keyframes moje_animace {0% {background-color: black;} 10% {background-color: blue;} 30% {background-color: green;} 70% {background-color: yellow;} 100% {background-color: red;} }</style></head>
Tuto animaci poté „voláme“ k určitým prvkům pomocí vlastnosti animation. První hodnotou je jméno animace (animation-name). V našem případě tedy „moje_animace“. Druhá hodnota (animation-duration) nám určuje jak dlouho má animace trvat. Zadává se v sekundách nebo milisekundách.
Třetí možnou hodnotou (animation-timing-function) je, jak se bude měnit rychlost animace, podle toho, jak bude probíhat. Touto hodnotou může být linear = stejná rychlost od začátku až do konce, ease = pomalý start, rychlejší prostředek, pomalejší konec, ease-in = pomalejší start, ease-out= pomalejší konec, ease-in-out= pomalejší start a pomalejší konec (celkově pomalejší než ease, protože nikde nezrychluje). Můžeme také zadat svoje vlastní hodnoty pomocí Bézierovy funkce pomocí čtyř čísel.
Čtvrtou hodnotou (animation-delay) je zdržení animace na začátku. Zapisuje se opět v sekundách nebo milisekundách. Pátou hodnotou (animation-iteration-count) je, kolik opakování má animace mít. Jejími hodnotami můžou být buďto číslo a nebo infinite, tedy nekonečně opakování. Šestou hodnotou (animation-direction), je jakým směrem a nebo jak se animace přehrává. Hodnotou reverse se rozumí, že se animace hraje pozpátku. Může mít také hodnotu alternate, což znamená že každou druhou animaci přehraje pozpátku. Hodnota alternate-reverse znamená přesný opak, co hodnota alternate. Tedy, že první animace bude pozpátku, druhá normálně, třetí pozpátku atd. Poslední hodnotou (animation-play-state) je hodnota paused nebo running, která určuje v jakém stavu se animace nachází (běží a nebo je pozastavena).
Syntax pro animaci= animation: name duration timing-function delay iteration-count direction play-state
Naší animaci si tedy zavoláme takto:
<div style=“animation: moje_animace 5s ease 0 infinite“></div>
U animací můžeme použít i 2D/3D transformace nebo přechody, o nichž si povíme v přístím díle.
One Response to “CSS Tutoriál XI. – Animace”