Animace prvků stránky může fungovat jako samostatný proces nebo běh pro vizualizaci akcí návštěvníků. V obou případech transformace elementu CSS nemá vliv na celkový tok a provádí se bez ohledu na obsah stránky jako celku.
Při použití pravidel a rozvíjení logiky změn prvků je velmi důležité použití správných hodnot vlastností a pravidel. Transformace CSS nedává vývojáři možnost ovládat. Všechny transformace jsou prováděny podle daných funkcí a jejich hodnot.
Obecná pravidla transformace
Logika obsažená v myšlence transformační funkce, která spočívá v narušení prvku. Prvky stránky jsou obdélníkové oblasti, i když je zobrazena hladkou grafikou uvnitř. Změnou velikosti stran nebo jejich posunutí (posunutí) může být:
vytvořená dynamika;
je vytvořena perspektiva;
Hlasitost byla provedena.
V každém případě se všechny transformace vyskytují v rovině, ale výsledek je možný jak ve 2D, tak 3D zobrazení. V následujícím příkladu jsou čtyři oblasti, každá s transformací CSS.
Horní řádek obrázků je původní, dolní řádek je výsledkem použití funkcí. Chcete-li ukázat základní funkce, použijte následující popis CSS a vložte ji do HTML stránky.
V tomto příkladu dochází k transformaci, když myší nad prvek a je přiřazen přes pseudo-class: hover. Pokud jde otransformace vlastností při použití funkce translate, je třeba poznamenat, že transformace CSS může být nahrazena levou a horní vlastností. Pokud jde o zkreslení funkce zkosení - výsledek může být nepředvídatelný.
Je pravděpodobné, že se lopatka používá jen zřídka, ale při správné a komplexní aplikaci animace CSS se zkosením bude možné vytvořit dynamiku v trojrozměrném prostoru při pohybu prvku. Například "kosmická loď na oběžné dráze" v kontextu webové stránky může být pohybem zboží v prodejně v obchodním prostoru.
Perspektivy v transformaci
Transformace textu do CSS může mít zvláštní účinek při aplikaci perspektivy. Příklad ukazuje, jak lze převedení normálního textu převést na pseudo-trihmer.
Snad to má smysl v některých úkolech, ale praktičnost reciproční myšlenky je zřejmá: v budoucnu můžete umístit informace a myší myší jej přeměnit na normální zobrazení. Je kompaktní a impozantní.
Tyto příklady transformace jsou popsány v CSS následujícím způsobem:
Použitím vlastností transformace můžete definovat bod, ve kterém bude transformace provedena. Posunutím tohoto bodu můžete ovládat střed, pro který je provedena transformace CSS. Funkce rotace má dvě možnosti - rotateX a rotateY - ale bez "X" a "Y" má jeden parametr.
Ve všech případech by měla být transformace prvků uspořádána v jednoduchých příkladech, aby se předešlo neočekávaným výsledkům. Je lepší nejprve správně formulovat pravidlo a popsat vlastnostjednoduchý prvek, než aby se okamžitě začlenil do rozsahu požadovaných transformací. Správné znění pravidel a vlastností CSS je klíčem k úspěchu a efektivním výsledkům.
Použití animačních vlastností
Animace CSS pomocí animace a @keyframes doplňuje transformační schopnosti, což umožňuje transformaci do skutečné reprezentace pomocí pohybu řízeného prvku nebo řízené transformace jeho formy.
Horní čára prvků je jejich normální stav. První sloupec se pohybuje, druhý se otáčí a třetí se mění. Zobrazí se několik snímků. Pro implementaci této funkce se používá následující kód:
Dynamiku a délku procesu lze nastavit v animacích a @keyframech. K dispozici je hladká a postupná změna procesu. Můžete použít jednotnou změnu a pohyb při akceleraci.
Vlastnosti animační vlastnosti
Vlastnost animace je obvykle napsána v jednom řádku. Obsahuje osm parametrů:
režim animace-plnění - přehrávání animace mimo zadaný čas přehrávání (
žádný, dopředu, dozadu, oba);
Při navrhování animace pomocí vlastností animaceTransformace jsou uvedeny v pravidle @keyframes, který definuje postupnost transformace prvků v krocích.
Důležité možnosti animace
Každá animace má jméno, trvání a typ. Názvem je definován požadovaný popis @keyframes, doba trvání určuje čas procesu a typ je varianta pohybu.
Je-li použit jednotný proces (pohyb a /nebo transformace), je hodnota lineární. Pokud chcete mít na začátku zrychlení - uvolnění, pokud na konci - lehkost. Jednoduše je uklouznutí a snadné ovládání je jeho hladší volba. Hodnota cubic-bezier vám umožňuje formulovat komplexní verzi pohybu a vytvořit originálnější verzi animace.
Na stránkách výrobce můžete vybrat libovolnou standardní verzi pohybu a navrhnout vlastní. Když kliknete na tlačítko "GO!", Oba čtverce se budou pohybovat paralelně a vy můžete odpovídat rozdílům a vizualizovat požadované chování prvku.
Vytvoření animačního rámce
Vlastnost @keyframes je "determinant" rámců (viz výše uvedený příklad), kterým se element transformuje. Myšlenka vlastnictví je velmi jednoduchá, ale možnosti, které nabízí, jsou obrovské. Proces začíná na 0% a končí 100% celkového času přiděleného animaci. Použití koncových bodů můžete použít pouze z nebo do, nebo 0% a 100%. Větší efekt lze dosáhnout sdílením celého procesu animace /transformace v místě. Velikost pozemku může být libovolná. Obvykle jsou přijata několik možností: 0%, 25%, 50%, 75% a 100%. Někdy jsou k dispozici pouze tři snímky: 0%, 50% a 100%. Jak to udělat v každém případězávisí na úkolu a vývojáři.
Při konstrukci libovolné varianty transformace je třeba dodržovat jedno zásadní pravidlo. Ne vždy přípustné pouze JavaScript, zejména naprogramován změnu vlastností prvků, jako je měnící se hodnotu pozemku pozadí obrazu. HTML, CSS a JavaScript jsou dokonale kombinovat, ale ve všech případech musíme vzít v úvahu skutečnou funkčnost jednotlivých komponent. V ideálním případě, že pracují společně v jasné a nejsou v rozporu s sebou.
