Animácia elementov stránok môže fungovať ako nezávislý proces alebo bežať na zobrazenie akcií návštevníkov. V oboch prípadoch transformácia elementu CSS nemá vplyv na celkový tok a vykonáva sa bez ohľadu na obsah stránky ako celku.
Pri používaní pravidiel a vývoji logiky zmeny prvkov je veľmi dôležité používať správne hodnoty vlastností a pravidiel. Transformácia CSS nedáva developerovi možnosť ovládať. Všetky transformácie sa vykonávajú podľa daných funkcií a ich hodnôt.
Všeobecné pravidlá transformácie
Logika stelesnená v myšlienke transformačnej funkcie, ktorá spočíva v deformácii prvku. Prvky stránky sú obdĺžniková oblasť, aj keď je v nej zobrazená hladká grafika. Zmena veľkosti strán alebo ich posunutie (posunutie) môže byť:
vytvorená dynamika; vzniká perspektíva; Vykonaný objem.V každom prípade sa všetky transformácie vyskytujú v rovine, ale výsledok je možný ako pri 2D, tak 3D zobrazení. V nasledujúcom príklade existujú štyri oblasti, z ktorých každá má transformáciu CSS.
Horný rad obrázkov je originál, spodný riadok je výsledkom použitia funkcií. Ak chcete demonštrovať základné funkcie, použite nasledujúci popis CSS a vložte ich do HTML stránky.
V tomto príklade dochádza k transformácii, keď myš prejde nad prvok a je priradená prostredníctvom pseudo-triedy: hover. Pokiaľ ide otransformovať vlastnosti pri použití funkcie translate, je potrebné poznamenať, že transformácia CSS môže byť nahradená ľavou a vrcholovou vlastnosťou. Pokiaľ ide o skreslenie funkcie skreslenia - výsledok môže byť nepredvídateľný.
predpokladá, že zošikmenie sa používa len zriedka, ale správne a komplexné aplikácie CSS animácie skosenie postaví impulz v trojrozmernom priestore od hnacieho prvku. Napríklad, "kozmickej lode na obežnej dráhe" v rámci webovej stránky, môže byť pohyb tovaru na displeji v obchode priestore.
Perspektíva transformácie
Transformácia textu do CSS môže mať osobitný účinok pri uplatňovaní perspektívy. Príklad ukazuje, ako môže byť normálne zobrazenie textu premenené na pseudo-trihmer.
To môže mať zmysel v niektorých problémov, ale použiteľnosť spätná väzba myšlienka je zrejmá: môžete dať informácie v perspektíve, a keď ho previesť do normálneho zobrazenia myšou. Je kompaktný a pôsobivý.
Tieto príklady transformácie sú popísané v CSS nasledovne:
Použitím vlastnosti transform transform-origin môžete definovať bod, v ktorom bude transformácia vykonaná. Posunutím tohto bodu môžete ovládať stred, pre ktorý sa vykonáva transformácia CSS. Funkcia otáčať aj keď má dve možnosti - rotateX a rotateY - ale bez «X» a «Y» je jednou z možností.
Vo všetkých prípadoch by transformácia prvkov mala byť usporiadaná v jednoduchých príkladoch, aby sa predišlo neočakávaným výsledkom. Je lepšie najprv správne formulovať pravidlo a opisovať danú vlastnosťjednoduchý prvok, než okamžite zahrnúť do rozsahu požadovaných transformácií. Správne znenie pravidiel a vlastností CSS je kľúčom k úspechu a efektívnym výsledkom.
Použitie animačných vlastností
CSS animácia pomocou animácie a @ keyframes dopĺňa transformačné schopnosti, ktoré umožňujú transformáciu na skutočnú reprezentáciu pomocou pohybu ovládaného prvku alebo riadenej transformácie jeho formy.
Horný riadok prvkov je ich normálny stav. Prvý stĺpec sa pohybuje, druhý sa otáča a tretí sa mení. Zobrazí sa niekoľko snímok. Na implementáciu tejto funkcie sa používa tento kód:
Dynamiku a dĺžku procesu možno nastaviť v animáciách a @keyframe. K dispozícii je hladká a postupná zmena procesu. Môžete uplatniť jednotnú zmenu a pohyb pri zrýchlení.
Vlastnosti vlastností animácie
Vlastnosť animácie je zvyčajne napísaná v jednom riadku. Obsahuje osem parametrov:
animation-name - názov animácie; trvanie animácie - trvanie animácie (sekundy "s", milisekundy "ms"); animácia - časovanie - funkcia - typ animácie (jednoduchosť, lineárnosť, jednoduchosť, ľahkosť, jednoduchosť, cubic-bezier); animácia-iteračný počet - počet opakovaní alebo nekonečných animácií; smer animácie - smer pohybu (normálne, spätné, alternatívne, striedavé); animation-play-state - zastavenie animácie (beží, pozastavené); oneskorenie animácie - oneskorenie animácie pred prehrávaním (sekundy "s", milisekunda "ms"); režim animácie - naplnenie - prehrávanie animácie mimo určeného času prehrávania (žiadne, dopredu, dozadu, oboje);Pri navrhovaní animácie pomocou vlastností animácieTransformácie sú uvedené v pravidle @keyframes, ktorý definuje sekvenciu transformácie prvkov v krokoch.
Dôležité možnosti animácie
Každá animácia má názov, trvanie a typ. Podľa názvu je definovaný požadovaný popis @keyframes, trvanie určuje čas procesu a typ je variantom pohybu.
Ak sa používa jednotný proces (pohyb a /alebo transformácia), hodnota je lineárna. Ak chcete mať na začiatku zrýchlenie - uvoľnenie, ak na konci - ľahkosť. Jednoduchosť je skĺznutím a ľahkosťou v ňom je jeho hladšia voľba.
Hodnota cubic-bezier vám umožňuje formulovať komplexnú verziu pohybu a vytvoriť pôvodnejšiu verziu animácie.
Na stránke výrobcu si môžete vybrať ľubovoľnú štandardnú verziu pohybu a navrhnúť vlastné. Keď kliknete na tlačidlo "GO!", Oba štvorce sa budú pohybovať paralelne a rozdiely medzi nimi a zobraziť požadované správanie sa elementu.
Vytvorenie animačného rámca
Vlastnosť @keyframes je "determinant" rámcov (viď príklad vyššie), cez ktoré sa prvok transformuje. Myšlienka nehnuteľnosti je veľmi jednoduchá, ale možnosti, ktoré poskytuje, sú obrovské. Proces začína pri 0% a končí 100% celkového času prideleného animácii. Môžete použiť iba koncové body z alebo do, alebo 0% a 100%. Väčší efekt možno dosiahnuť zdieľaním celého procesu animácie /transformácie na mieste. Veľkosť pozemku môže byť jedna. Zvyčajne sa prijímajú viaceré možnosti: 0%, 25%, 50%, 75% a 100%. Niekedy sú postačujúce len tri snímky: 0%, 50% a 100%. Ako to urobiť v každom prípadezávisí od úlohy a vývojára.
Pri konštrukcii akéhokoľvek variantu transformácie by sa malo dodržať jedno základné pravidlo. Nie je vždy povolené používať javascript, najmä pre programovateľnú zmenu vlastností prvkov, napríklad zmena hodnoty vlastnosti pozadia. HTML, CSS a javascript dokonale kombinujú, ale vo všetkých prípadoch je potrebné vziať do úvahy skutočnú funkčnosť každej z týchto komponentov. V ideálnom prípade, ak pracujú v jasnej kombinácii a neinterferujú sa navzájom.
