CSS je jedným z najúčinnejších spôsobov, ako interaktívnu webovú stránku. Transformuje vzhľad a štýl nášho základného webstránka. Jednou z dôležitých a vzrušujúcich funkcií, ktoré CSS ponúka, je to, že nám umožňuje vykonávať animácie. Umožňuje nám presunúť prvky na našej stránke. Začnime našu cestu animácií v CSS v nasledujúcom poradí:
Animácie v CSS
Pridávanie animácií na našu webovú stránku je skvelým spôsobom, ako upriamiť pozornosť používateľov. Nielenže pridáva hodnotu našej stránke, ale tiež obohacuje užívateľskú skúsenosť. Animácia v CSS je zostavená z dvoch častí. Oni sú
- Kľúčové snímky
- Animácia
Animácie CSS sú podporované vo všetkých prehliadačoch. Niektoré staršie prehliadače, napríklad Safari (až do verzie 8.0), však na interpretáciu vlastností animácie vyžadujú predponu (-webkit-). Napríklad:
.anim {výška: 200px šírka: 200px pozadie: svetlo modrá poloha: relatívny polomer okraja: 100% -webkit-názov animácie: cssanim / * staré prehliadače * / -webkit-animácia-doba trvania: 5 s / * staré prehliadače * / animácia -name: cssanim animation-duration: 5s} / * old browsers * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Môžeme použiť ukážkovú html stránku zhora a nahradiť CSS kód v tagu style pre vyskúšanie ďalších príkladov.
Kľúčové snímky v CSS
Toto je stavebný kameň animácií v CSS. Používa sa na definovanie konkrétnych momentov a štýlov animácie na našej webovej stránke. Inými slovami, keď v našom CSS zadáme @keyframes, získa ovládací prvok na zmenu aktuálneho stavu do nového stavu alebo na určitú dobu animuje objekty.
hash mapa vs hash tabuľka
@Keyframes musia mať určité vlastnosti na ovládanie animácie, ako je napríklad názov animácie, fázy a vlastnosti.
názov - Každá animácia musí byť pomenovaná tak, aby popisovala jej správanie.
Fázy - Fáza predstavuje dokončenie animácie. Dá sa to označiť buď kľúčovým slovom „do“ a „od“ alebo ako percento, zatiaľ čo 0% predstavuje počiatočný stav a 100% predstavuje konečný stav animácie. Výhodou použitia percentuálneho zastúpenia je, že medzi nimi môžeme definovať niekoľko medzistupňov, t. J. Aké by malo byť správanie animácie na 50% alebo 75% atď.
Vlastnosti - Tieto vlastnosti nám dávajú kontrolu nad @keyframes, aby sme s nimi mohli manipulovať počas animácie.
.anim {výška: 200 pixelov šírka: 200 pixelov pozadie: svetlo modrá poloha: relatívny polomer okraja: 100% názov animácie: cssanim dĺžka animácie: 5 s} @keyframes cssanim {0% {transformácia: mierka (0,5) nepriehľadnosť: 0} 50 % {transformácia: mierka (1,5) nepriehľadnosť: 1} 100% {transformácia: mierka (1)}}Teraz, keď máme jasno v definovaní kľúčových snímok. Poďme preskúmať vlastnosti animácie a opísať, ako animovať naše prvky a objekty. Tieto dve vlastnosti, tj. Inherit a initial, je možné použiť so všetkými typmi animácií. Tieto vlastnosti sa zvyčajne používajú spolu so značkou div na preukázanie odlišného správania.
počiatočné: Nastaví túto vlastnosť na predvolenú hodnotu.
dediť: Dedí túto vlastnosť z nadradeného prvku.
Vlastnosti animácie
- názov-animácie
Určuje názov animácie, ktorá sa používa v @keyframes na manipuláciu.Možné hodnoty sú:
- názov: Toto určuje názov, ktorý sa má naviazať na kľúčový snímok pre animáciu.
- žiadny: Toto je predvolená hodnota a dá sa použiť na prepísanie zdedených alebo kaskádových animácií.
Syntax:
animation-name: name | žiadny | počiatočné | dediť
.anim {výška: 200 pixelov šírka: 200 pixelov pozadie: svetlo modrá poloha: relatívny polomer okraja: 100% názov animácie: cssanim doba animácie: 5 s} @keyframes cssanim {0% {vľavo: 0px} 100% {vľavo: 300px} }- trvanie animácie
Určuje čas, ktorý trvá, kým animácia dokončí jedno spustenie. Je definovaná v sekundách alebo milisekundách (napr. 4 s alebo 400 ms). Predvolená hodnota tejto vlastnosti je 0 s, takže ak táto vlastnosť nie je zadaná, animácia sa neuskutoční.
Syntax:
animation-duration: time
.anim {výška: 200px šírka: 200px pozadie: modrá poloha: relatívny polomer okraja: 100% názov-animácie: cssanim doba trvania animácie: 4s} @keyframes cssanim {0% {transformácia: mierka (0,4) nepriehľadnosť: 0} 50 % {transformácia: mierka (1.4) nepriehľadnosť: 1} 100% {transformácia: mierka (1)}}- oneskorenie animácie
Vlastnosť animation-delay nám umožňuje určiť oneskorenie animácie. Definuje, kedy sa spustí sekvencia animácie.
Hodnotu tejto vlastnosti je možné deklarovať v sekundách (s) alebo milisekundách (ms). Môže mať kladné aj záporné hodnoty. Kladná hodnota označuje, že animácia sa spustí po uplynutí zadaného času a dovtedy zostane unimimovaná. Na druhej strane záporná hodnota okamžite spustí animáciu od bodu, akoby sa už vykonávala po zadaný časový rámec.
Syntax:
oneskorenie animácie: čas
.anim {výška: 200 pixelov šírka: 200 pixelov pozadie: svetlo modrá poloha: relatívny polomer okraja: 100% názov animácie: cssanim doba animácie: 4 s oneskorenie animácie: 4 s} @ keyframes cssanim {0% {vľavo: 0px} 100% {left: 250px}}- počet animácií-iterácií
Táto vlastnosť udáva, koľkokrát by sa mala sekvencia animácie prehrať. Predvolená hodnota tejto vlastnosti je 1.Možné hodnoty sú:
- číslo - označuje počet iterácií
- nekonečný - označuje, že animácia by sa mala opakovať navždy
Syntax:
počet animácií-iterácií: počet | nekonečný
.anim {výška: 200px šírka: 200px pozadie: svetlo modrá poloha: relatívny polomer okraja: 100% názov animácie: cssanim animácia-trvanie: 2 s počet animácií: 4} @keyframes cssanim {0% {vľavo: 0px} 100% {left: 100px}}- smer animácie
Definuje smer animácie. Smer prvku je možné nastaviť tak, aby hral dopredu, dozadu alebo v alternatívnych cykloch.Predvolená hodnota tejto vlastnosti je normálna a pri každom cykle sa resetuje.Možné hodnoty sú:
normálne - Toto je predvolené správanie a animácia sa prehráva dopredu. Po každom cykle sa animácia dostane do pôvodného stavu a znova sa prehrá vpred
obrátiť - Animácia sa prehráva dozadu. Po každom cykle sa animácia dostane do koncového stavu a prehrá sa dozadu
striedať - Smer animácie je obrátený, to znamená, že sa pri každom cykle prehráva najskôr dopredu a potom dozadu. Každý nepárny cyklus vykresľuje animáciu dopredu a každý párny cyklus spätný pohyb.
striedavo-spiatočka - Smer animácie je striedavo obrátený. Tu sa animácia prehráva najskôr dozadu a potom dopredu v každom cykle. Každý nepárny cyklus sa pohybuje dozadu alebo dozadu a každý párny cyklus poskytuje animáciu dopredu.
Syntax:
smer animácie: normálny | spätný chodnáhradník | striedavo-spiatočka
.anim {výška: 200px šírka: 200px pozadie: svetlo modrá poloha: relatívny polomer okraja: 100% názov animácie: cssanim animácia-trvanie: 2 s animácia-iterácia-počet: nekonečno} @keyframes cssanim {0% {vľavo: 0px} 100% {left: 100px}}- funkcia načasovania animácie
Táto vlastnosť určuje krivku rýchlosti alebo štýl pohybu animácie. Priraďuje sa na to, aby sa mohla hladko vykonať zmena štýlu animácie z jednej formy do druhej. Ak nie je priradená žiadna hodnota, je to predvolené.Možné hodnoty pre funkciu časovania animácie sú:
ľahkosť - Toto je predvolená hodnota vlastnosti. Tu animácia začína pomaly, uprostred sa postupne stáva rýchlou a potom opäť pomaly končí.
lineárny - Animácia si udržiava rovnakú rýchlosť počas celého cyklu, tj od začiatku do konca.
uľahčenie - Animácia sa začína pomaly.
odľahčenie - Animácia sa končí pomaly.
easy-in-out - Animácia sa pohybuje pomaly počas začiatku aj konca.
kubický-Bezier (n, n, n, n) - Táto pokročilá funkcia umožňuje vytvoriť si vlastnú funkciu časovania definovaním vlastných hodnôt. Možná hodnota sa pohybuje od 0 do 1.
Syntax:
funkcia časovania animácie: lineárna | ľahkosť | zmiernenie | uľahčenie | uľahčenie vstupu |kubický-Bezier (n, n, n, n)
.anim {výška: 200 pixelov šírka: 200 pixelov pozadie: svetlo modrá poloha: relatívny polomer okraja: 100% názov animácie: cssanim doba animácie: 2 s smer animácie: obrátiť} @keyframes cssanim {0% {pozadie: oranžová zľava: 0 pixelov } 50% {pozadie: žltá zľava: 200 pixelov hore: 200 pixelov} 100% {pozadie: modré zľava: 100 pixelov}}- režim animácie-vyplnenie
Toto je špeciálna vlastnosť, pretože určuje štýl animácie pred alebo po prehraní animácie.V predvolenom nastavení štýl animácie pred začiatkom alebo po skončení animácie neovplyvní. Táto vlastnosť je užitočná, pretože pomáha pri prepísaní tohto predvoleného správania animácie.Nasledujúce sú možné hodnoty pre vlastnosť režimu animácie-vyplnenia:
žiadny - Toto je predvolená hodnota vlastnosti, t. J. Animačné štýly sa neaplikujú na prvok pred alebo po animácii.
dopredu - Štýly sú zachované prvkom v konečnej sekvencii animácie, t. J. Po dokončení animácie.
dozadu - Štýly sú zachované prvkom v počiatočnej sekvencii animácie, t. J. Pred tým, ako sa animácia pozrie, najmä počas oneskorenia animácie.
ako obrátiť číslo
oboje - To znamená, že animácia bude nasledovať v smere, tj. Dopredu a dozadu
Syntax:
režim animácie-vyplnenie: žiadny | dopredu | dozadu | oboje
.anim {šírka: 50 pixelov výška: 50 pixelov pozadie: svetlo modrá farba: biela váha písma: tučné umiestnenie: relatívne meno animácie: cssanim animácia trvanie: 5 s počet iterácií animácie: nekonečný polomer hranice: 100%} # anim1 { Animation-Timing-Function: Eau} # Anim2 {Animation-Timing-Function: Linear} # Anim3 {Animation-Timing-Function: EASY-IN} # Anim4 {Animation-Timing-Function: Eau-Out} # Anim5 {Animation- funkcia načasovania: easy-in-out} @keyframes cssanim {od {zľava: 0px} do {zľava: 400px}}- stav animácie-prehrávania
Táto vlastnosť určuje, že animácia bude v stave prehrávania alebo pozastavenia. Keď sa animácia obnoví z pozastavenia, začne tiež od miesta, kde zostala.Možné hodnoty sú:
- hranie - Na vykreslenie spustenej animácie
- pozastavené - Vykresliť animáciu v pozastavenom stave.
Syntax:
stav animácie-prehrávania: pozastavené | hranie
.anim {šírka: 100 pixelov výška: 100 pixelov pozadie: svetlo modrá pozícia: relatívne meno animácie: cssanim trvanie animácie: 3 s oneskorenie animácie: 2 s režim vyplnenia animácie: spätný polomer okraja: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animácia
Toto sa nazýva vlastnosť skratky animácie. Používa sa na čistejší kód. Keď si zvykneme na všetky vlastnosti animácie, odporúča sa použiť skratku animácie na rýchlejšie kódovanie a na definovanie všetkých vlastností v jednom riadku.
Syntax:
animácia: [názov-animácie] | [trvanie animácie] | [funkcia časovania animácie] |[oneskorenie animácie] | [počet animácií-iterácií] | [smer animácie] |[animation-fill-mode] | [stav animácie-prehrávania]
Všetky efekty animácie, ktoré zobrazujeme vyššie pomocou rôznych vlastností animácie, je možné dosiahnuť pomocou skratkyanimácia nehnuteľnosť.
.anim {výška: 200 pixelov šírka: 200 pixelov pozadie: svetlo modrá poloha: relatívny polomer okraja: 100% názov animácie: cssanim animácia-trvanie: 2 s smer animácie: normálna animácia-stav prehrávania: pozastavený} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Týmto sa uzavrú všetky vlastnosti animácie, ktoré je možné použiť v CSS. Mali by sme vyskúšať rôzne variácie týchto vlastností, aby sme získali jasnejší obraz. Keď to urobíme pohodlne, vlastnosť skratky animácie môže byť veľkou pomocou pri písaní čistejšieho a rýchlejšieho kódu. Toto je jedna z dôležitých zručností, ktoré sa učia v CSS pre webových vývojárov. Pretože máme tendenciu zameriavať sa viac na pohybujúce sa objekty ako na statické, môžu nám to pomôcť dosiahnuť animácie a tiež vytvoriť vynikajúce pozoruhodné webové stránky.
Vyskúšajte naše ktorá prináša živé školenie vedené inštruktorom a skúsenosti s projektmi v reálnom živote. Toto školenie vám pomôže získať zručnosti v oblasti práce s webovými technológiami typu back-end a front-end. Zahŕňa školenie zamerané na vývoj webových aplikácií, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Máte na nás otázku? Uveďte to v sekcii komentárov blogu „Animácie v CSS“ a my sa vám ozveme.