Čím bližšie sme k rozhraniu, ktoré začína fungovať, tým je pre používateľa zrozumiteľnejšie. V živote sa takmer nič nedeje okamžite - pri otvorení plechovky sódy alebo zatvorení očí pred spaním pozorujeme veľa prechodných stavov, a nie prudké „otvorené/zatvorené“, ako sa to deje na webe.

V mojom článku sa podelím o svoje poznatky o CSS animácii a o tom, ako s ňou pracovať. Animácia dodáva webovým stránkam dynamiku a zlepšuje pochopenie ich schopností. Oživuje webové stránky a pomáha pri interakcii s používateľmi. Na rozdiel od prechodov CSS3 sú animácie CSS založené na kľúčových snímkach. Ktoré vám umožňujú prehrávať a opakovať efekty po určitú dobu, ako aj automaticky zastaviť animáciu v rámci slučky.

Animácia je množina kľúčových snímok alebo kľúčových snímok uložených v CSS:

@keyframes animation-test ( 0 % ( šírka: 100 pixelov; ) 100 % ( šírka: 200 pixelov; ) )

Pozrime sa, čo sa tu deje. Kľúčové slovo @keyframes označuje samotnú animáciu. Potom nasleduje názov animácie, v našom prípade animácia-test. Zložené zátvorky obsahujú zoznam kľúčových snímok. Používame počiatočný rámec 0% a koncový rámec 100% (možno ich zapísať aj ako od a do).
Pozrite sa na kód nižšie. Animáciu je možné nastaviť aj takto:

@keyframes animation-test ( from ( width: 0; ) 25 % ( width: 75px; ) 75 % ( width: 150px; ) do ( width: 100 %; ) )

Pamätajte, že ak nie je zadaný počiatočný alebo koncový rámec, prehliadač ich automaticky zistí, ako keby na ne nebola použitá žiadna animácia.

Animáciu môžete pripojiť k prvku, ako je tento:

Selektor prvku ( názov-animácie: názov-vašej-animácie; dĺžka trvania animácie: 2,5 s; )

Vlastnosť animation-name určuje názov pre animáciu @keyframes. Pravidlo trvania animácie určuje trvanie animácie v sekundách (1 s, 30 s, 0,5 s) alebo v milisekundách (600 ms, 2 500 ms).

Môžete tiež zoskupiť kľúčové snímky:

@keyframes animation-test ( 0%, 35% (šírka: 50px; ) 75% (šírka: 200px; ) 100% (šírka: 100%; ) )

Na jeden prvok (selektor) môžete použiť niekoľko animácií. Ich názvy a parametre by mali byť napísané v poradí aplikácie:

Selektor prvku ( názov-animácie: názov-anim-1, názov-anim-2; dĺžka trvania animácie: 1 s, 3 s; )

Oneskorenie animácie:

Vlastnosť animation-delay určuje oneskorenie pred spustením animácie v sekundách alebo milisekundách:

Selektor elementu ( názov-animácie: názov-anim-1; trvanie animácie: 3 s; oneskorenie animácie: 2 s; /* Pred spustením animácie uplynú 2 sekundy */ )

Prehrať animáciu:

Pomocou animation-itation-count môžeme určiť, koľkokrát sa bude animácia opakovať: 0, 1, 2, 3 atď. Alebo nekonečné pre opakovanie:

Selektor prvku ( názov-animácie: názov-animácie-1; trvanie animácie: 3 s; oneskorenie-animácie: 4 s; počet-iterácií animácie: 5; /* animácia sa prehrá 5-krát */ )

Stav prvku pred a po animácii:

Pomocou vlastnosti animation-fill-mode je možné určiť, v akom stave bude prvok pred spustením animácie a po jej skončení:

animačný-fill-mode: dopredu;- prvok animácie bude po dokončení/prehrávaní v stave poslednej kľúčovej snímky;

a nimation-fill-mode: dozadu;- prvok bude v stave prvej kľúčovej snímky;

animačný-fill-mode: oba; - pred spustením animácie bude prvok v stave prvej kľúčovej snímky, po dokončení - v stave poslednej.

Spustenie a zastavenie animácie:

Za toto zodpovedá vlastnosť animation-play-state, ktorá môže nadobudnúť dve hodnoty: spustený alebo pozastavený.

Element-selector:hover (animácia-prehrávanie-stav: pozastavené; )

Smer animácie:

Vlastnosť animation-direction určuje, ako ovládať smer, v ktorom sa animácia prehráva. Tu sú možné hodnoty:

smer animácie: normálny; - animácia sa prehráva v priamom poradí;

smer animácie: spätný; - animácia sa prehrá v opačnom poradí, od do do od;

animácia-smer: striedať;- párne opakovania animácie sa prehrávajú v opačnom poradí, nepárne - v poradí dopredu;

animácia-smer: striedavo-reverzne; - nepárne opakovania animácie sa prehrávajú v opačnom poradí, párne - v poradí dopredu.

Funkcia plynulého výstupu animovaných snímok:

Vlastnosť animation-timing-function vám umožňuje nastaviť špeciálnu funkciu zodpovednú za rýchlosť prehrávania animácie. Štandardne sa animácia spúšťa pomaly, rýchlo sa zrýchľuje a na konci sa spomalí. V súčasnosti máme nasledujúce preddefinované hodnoty: lineárny, ľahkosť, uvoľnenie, uvoľnenie, uvoľnenie, prechod, začiatok, koniec.

Takéto funkcie si však môžete vytvoriť sami. Význam funkcia časovania animácie: cubic-bezier (P1x, P1y, P2x, P2y); berie 4 argumenty ako vstup a vytvára distribučnú krivku pre proces animácie.

Na stránke si môžete podrobnejšie preštudovať alebo vyskúšať tvorbu týchto funkcií http://cubic-bezier.com

Nakoniec je možné animáciu rozložiť na množinu jednotlivých hodnôt (krokov) pomocou funkcie krokov, ktorá berie ako vstup počet krokov a smer (začiatok alebo koniec). V nižšie uvedenom príklade sa animácia skladá z 5 krokov, z ktorých posledný sa uskutoční tesne pred koncom animácie:

Selektor prvku ( názov-animácie: názov-anim-1; trvanie-animácie: 3 s; oneskorenie-animácie: 5 s; počet-iterácií animácie: 3; funkcia časovania animácie: kroky (5, koniec); )

Podpora prehliadača pre animáciu:

Hodnoty v tabuľke označujú prvú verziu prehliadača, ktorá túto vlastnosť plne podporuje.

Hodnoty s -webkit-, -moz- alebo -O- označujú prvú verziu, ktorá pracovala s predponou.

Na webovej stránke https://www.w3schools.com Animáciu CSS si môžete preštudovať podrobnejšie (s príkladmi).
Jednou z populárnych knižníc na prácu s animáciami je animate.css.

Môže sa zdať, že ťažkosti, s ktorými sa stretávate pri práci s animáciami CSS, nie sú opodstatnené. Ale to absolútne nie je pravda.

Po prvé, CSS je výkonný nástroj na zlepšenie používateľského zážitku z rozhrania. Nemá to veľký vplyv na produktivitu používateľov. Na rozdiel od analógov JavaScriptu. Technológia prostredníctvom používania výpočtový výkon GPU umožňuje prehliadačom rýchlo optimalizovať rýchlosť vykresľovania prvkov.

Po druhé, flexibilita, rýchlosť a jednoduchosť implementácie CSS animácií pomôže „vdýchnuť život“ existujúcim alebo novým rozhraniam. Po vyvinutí všeobecných a originálnych prístupov a pochopení špecifík technológie môžete vytvoriť jedinečné používateľské rozhrania pre takmer všetky projekty.

Dúfam, že ste v článku našli užitočná informácia pre mňa. Krásne stránky všetkým. Nezabudnite na animácie :)

POZOR! Keďže v tejto lekcii budeme analyzovať animáciu, nebudem vám môcť ukázať príklad jej práce na obrázkoch, takže si pokojne otvorte editor kódu a napíšte tam kód uvedený v tomto článku.

Základy tvorby

Takže v prvom rade musíte začať s tým, ako ho vytvoriť. Pravdepodobne ste zvyknutí na to, že akákoľvek vec v CSS je implementovaná priradením potrebných vlastností s príslušnými hodnotami požadovanému selektoru. Takže pri vytváraní animácie to nestačí. Schéma vyzerá takto:

Samotné prechodové efekty sú vytvorené pomocou @keyframes

Požadovaný prvok dostane rovnakú animáciu, ako aj jej parametre (to všetko pomocou vlastností a ich hodnôt).

Najprv si teda musíme popísať potrebné zmeny v @keyframes, poďme sa bližšie pozrieť na to, ako s nimi pracovať.

@keyframes syntax

Vlastne bude pre mňa jednoduchšie vysvetliť vám všetko pomocou hotového príkladu, aj keď veľmi jednoduchého. Tu je (kód sa pridá do súboru css):

@keyframes pulse( 0%(veľkosť písma: 50px;) 50%(veľkosť písma: 60px;)) 100%(veľkosť písma: 50px;))

@keyframes pulz ( 0% (veľkosť písma: 50px;) 50 % (veľkosť písma: 60px;))

Takže za kľúčovým slovom @keyframes je ľubovoľné slovo, ktoré bude fungovať ako názov animácie. V našom prípade je to „pulz“. Ďalej otvorte kučeravé zátvorky, v ktorých sú napísané potrebné pravidlá.

Percentá sú takzvané časové pečiatky, pri ktorých budú k prvku pridané špecifikované vlastnosti. V našom prípade to, čo je napísané, znamená nasledovné: na samom začiatku vykonávania bude veľkosť písma 50 pixelov, v strede sa zväčší na 60 a na konci sa opäť zmenší na pôvodnú veľkosť.

Kľúčové slová from a to môžu nahradiť percentuálny údaj, označujú 0 % a 100 %, teda začiatok a koniec prehrávania.

Uvedenie animácie do činnosti

Zatiaľ máme len kód, ktorý generuje efekt animácie, no nikde sa nepoužíva. Ak obnovíte svoju webovú stránku, nič sa nezmení. Ak chcete použiť animáciu, musíte vykonať dva kroky:

Vyberte prvok, pre ktorý sa použije

Prepojte ho s pravidlami popísanými cez @keyframes (cez názov) a tiež nastavte dodatočné nastavenia Ak je to nevyhnutné.

Vyskúšajme

V mojom html súbore som vytvoril blok s triedou shadow, ktorý obsahuje jednoduchý riadok textu. Naším cieľom je použiť na to animačné efekty, ktoré sme opísali vyššie textový prvok.

Aby všetko fungovalo, je potrebné v tomto prípade zadať dve požadované vlastnosti. Po prvé, toto je názov, ktorý sme napísali do kľúčových snímok. Po druhé, toto je trvanie animácie, pretože bez tohto parametra ju prehliadač jednoducho nebude môcť prehrať.

Takže okrem štýlov, ktoré už náš blok má, pridávame nové:

názov-animácie: pulz; dĺžka animácie: 2 s;

Všetko sa teda zopakuje 4-krát a potom sa zastaví. Ako viete, namiesto štyroch môžete zadať ľubovoľné číslo.

Nekonečná animácia v css3

Implementuje sa veľmi jednoducho pomocou rovnakej vlastnosti. V skutočnosti stačí nastaviť počet opakovaní na niekoľko tisíc, to bude stačiť, ale teoreticky sa naša animácia nebude opakovať donekonečna.

animácia-iterácia-počet: nekonečný;

animácia - iterácia - počet : nekonečno ;

To je všetko, teraz sme urobili nekonečné opakovanie. Neodporúčam kontrolovať, či je to pravda, keď celý život sedíte za monitorom. Toto sa jednoducho používa v prípadoch, keď chcete, aby sa efekt neustále opakoval a nezmizol. Ak je nenápadný a nerozptyľuje používateľa, tak prečo nie.

Oneskorenie pred štartom

V predvolenom nastavení sa prehrávanie spustí po úplnom načítaní stránky. Toto správanie je možné ovládať pomocou vlastnosti animation-delay. Jeho hodnota je uvedená v sekundách.

Smer

Ďalšou zaujímavou vlastnosťou je animácia-direction. V predvolenom nastavení je normálne, ak ho nastavíte na spätný chod, všetky popísané snímky sa vykonajú v opačnom smere. Pozrime sa, aký je rozdiel. Aby som to urobil, trochu som zmenil efekt pridaním ďalšieho rámu.

@keyframes pulse( 0%(font-size: 50px;) 50%(font-size: 60px;) 70%(font-size: 80px;) 100%(font-size: 50px;))

@keyframes pulz ( 0% (veľkosť písma: 50px;) 50% (veľkosť písma: 60px;) 70 % (veľkosť písma: 80px;) 100 % (veľkosť písma: 50px;))

Takže pri normálnom smere sa v prvej polovici animácie veľkosť písma zväčší na 60 pixelov, potom sa opäť prudko zväčší, až na 80, potom sa vráti do pôvodnej polohy.

Ryža. 2. Pôvodná veľkosť textu

Ryža. 3. Veľkosť písma je takmer na konci animácie, než sa náhle vráti do pôvodného stavu.

Teraz sa pýtame:

smer animácie: spätný;

animácia - smer : reverz ;

Všetko sa obrátilo hore nohami. Najprv sa text zväčší až o 30 pixelov, až do 80, a po zvyšok animácie sa bude postupne zmenšovať, až sa nakoniec vráti do predchádzajúcej veľkosti. Je to jednoduché.

Animačná forma

A toto je možno jedno z najzaujímavejších nastavení, s ktorým môžete dlho experimentovať. V predvolenom nastavení sa všetky zmeny vykonávajú rovnakou rýchlosťou. Tento typ animácie sa nazýva lineárny a okrem neho existujú aj iné.

Zdravím vás priatelia! Dnes sa pozrieme na veľmi zaujímavú tému – vytváranie CSS animácií na reálnom príklade. Vyvrcholením tohto tutoriálu bude vytvorenie nádhernej CSS animácie loga Million Dollar.

V pohode

Stammer

Materiály na lekciu

• Zdroje: Stiahnuť
• Základný príklad z lekcie: https://codepen.io/agragregra/pen/PKNavm
• Počiatočná šablóna z lekcie: https://github.com/agragregra/optimizedhtml-start-template

Trochu teórie

Než začnete vytvárať animovaný príklad, mali by ste si prejsť základy CSS animácie, zvážiť základné pojmy, vlastnosti a pravidlá Tvorba CSS animácií.

Ak ste už mali skúsenosti s vytváraním animácií v akýchkoľvek aplikáciách, ako je Adobe After Effects alebo starý Flash Professional (teraz Adobe Animate), potom by ste mali poznať pojmy ako „Kľúčové snímky“, „Dočasné funkcie alebo dynamika pohybu“, ktoré sa rovnako ako v ktorejkoľvek inej oblasti animácie vzťahujú na animáciu prvkov na stránke pomocou CSS. Na rozdiel od práce s aplikačnými rozhraniami však animácie CSS vytvárate písaním kódu v editore.

CSS pravidlo @keyframes

Vytvorenie animácie CSS začína deklarovaním názvu animácie v bloku @kľúčové snímky a definovanie takzvaných animačných krokov alebo kľúčových snímok.

Na zopakovanie teórie a základov použijeme čisté CSS a neskôr na zložitejšom príklade použijeme preprocesor Sass. Viac o Sass sa dozviete v lekcii. Okrem toho pre hlbšie pochopenie základov CSS odporúčam prečítať si aj lekcie „Základy CSS – príručka pre najmenších“ a „Všetky selektory CSS v jednej lekcii“

Pozrime sa na štruktúru @keyframes a prácu s kľúčovými snímkami jednoduchý príklad:

@keyframes otáčanie ( 0 % ( okraj-polomer: 0 0 0 0; transformácia: rotácia (0 stupňov); ) 25 % ( okraj-polomer: 50 % 0 0 0; transformácia: rotácia (45 stupňov); ) 50 % ( okraj- polomer: 50 % 50 % 0 0; transformácia: otočenie (90 stupňov); ) 75 % ( polomer okraja: 50 % 50 % 50 % 0; transformácia: otočenie (135 stupňov); ) 100 % ( polomer okraja: 50 % 50 % 50 % 50 %; transformácia: rotácia (180 stupňov); ) )

V prvom riadku vidíme, že po kľúčové slovo@keyframes má názov „turning“. Toto je názov bloku rámcov, na ktorý sa budeme ďalej odvolávať.

Po vyhlásení sa otvorí zložená zátvorka (v v tomto príklade na čistý CSS), v ktorom sa vlastnosti zapisujú postupne od 0 % do 100 % pre každý kľúčový rámec. Upozorňujeme, že medzi 0% a 100% môžete vložiť ľubovoľný počet medzihodnot, či už je to 50%, 75% alebo dokonca 83%. Je to veľmi podobné časovej osi animačnej aplikácie, kde môžete medzi dva stavy pridať ľubovoľný medzistav.

Ďalej je možné tento blok kódu s kľúčovými snímkami aplikovať na ľubovoľný selektor CSS, ale najčastejšie sú pripravené pre konkrétny selektor, ak chceme dosiahnuť určité správanie z požadovaného bloku.

Prístup k bloku kľúčových snímok

Potom, čo sme nastavili kľúčové snímky pre objekt (v reálnom živote sa to robí paralelne alebo dokonca po prístupe k bloku pomocou kľúčových snímok), môžeme pristupovať k nášmu novovytvorenému bloku. Pozrime sa na nasledujúci jednoduchý kód z vyššie uvedeného príkladu:

Div (šírka: 120px; výška: 120px; farba pozadia: fialová; okraj: 100px; animácia: otočenie 2s uvoľnenie 1s nekonečné striedanie; )

Nič zvláštne až do posledného riadku. Tu určíme, ako bude objekt spočiatku vyzerať a v poslednom riadku bloku odkazujeme na blok kľúčových snímok nazývaný „otočenie“:

Animácia: otáčanie 2s uvoľnenie 1s nekonečné striedanie;

Ak je všetko relatívne jasné s definíciou kľúčových rámcov, potom tento riadok potrebuje okamžité vysvetlenie. Ako vidíme, prvé príde Vlastnosť CSS„animácia“. Toto je skrátená forma, ako napríklad vlastnosť „margin: 20px 30px 40px 50px”, ktorú možno rozdeliť do niekoľkých samostatných vlastností:

Touto analógiou možno zloženú vlastnosť „animácia“ rozdeliť na niekoľko samostatných vlastností:

názov-animácie	Názov animácie, ku ktorej sa pristupuje z @keyframes
trvanie animácie	Trvanie alebo ako dlho trvá vykonávanie animácie CSS. Dá sa zadať v sekundách (s) alebo milisekundách (ms)
funkcia animácie-časovania	Časová funkcia, dynamika pohybu objektu alebo zmeny vlastností ( ľahkosť- (štandardne) animácia začína pomaly, zrýchľuje a pomaly končí; lineárne- animácia prebieha rovnomerne; uvoľnenie- začína pomaly a zrýchľuje sa smerom k poslednej kľúčovej snímke; uvoľnenie- rýchlo sa rozbehne a na konci plynule spomaľuje; easy-in-out- pomaly začína a pomaly končí)
animácia-oneskorenie	Čas oneskorenia animácie PRED spustením. Udáva sa aj v sekundách alebo milisekundách
animácia-iterácia-počet	Počet opakovaní (iterácií) animácie ( nekonečné- nekonečno, alebo môžete zadať jednoduché číslo bez jednotiek)
animácia-smer	Smer animácie, sekvenčný, spätný alebo tam a späť ( normálne- (v predvolenom nastavení) animácia sa prehrá od začiatku do konca a zastaví sa; striedať- hrá od začiatku do konca a v opačnom smere; striedavo-reverzne- hrá od konca do začiatku a späť; obrátene- animácia sa prehrá od konca.)
animácia-prehrať-stav	Ovládanie prehrávania animácií ( pozastavené(pauza), beh(spustenie) atď.). V prípade potreby je možné použiť pri: umiestnení kurzora myši alebo z funkcie JS
režim animácie	Stav prvku pred a po prehratí animácie. Napríklad hodnota dozadu umožňuje vrátiť všetky vlastnosti do pôvodného stavu ihneď po aplikácii animácie

Skúsení vývojári najčastejšie nepíšu všetky tieto vlastnosti oddelene, ale používajú krátky zápis a jeho štruktúra je nasledovná:

animácia: (1. animácia-názov - názov) (2. animácia-trvanie - trvanie) (3. animácia-časovanie-funkcia dynamika pohybu) (4.animácia-oneskorenie - pauza pred spustením) (5. animácia-iterácia- počet - počet vykonaní) (6. animácia-smer - smer)

Animácia: názov animácie 2s lineárne 1s nekonečne dozadu

Z príkladu vidíme, že vstúpime do bloku @keyframes animationname, nastavíme trvanie animácie na 2 sekundy, dynamika je lineárna, pauza pred spustením je 1 sekunda, animácia sa donekonečna opakuje a vykonáva sa v opačnom smere.

Ako som už povedal, krátky zápis začína vlastnosťou " animácie“, za ktorými nasledujú hodnoty, ktorých postupnosť je lepšie nezabudnúť, aby nedošlo k zámene pri písaní CSS animácie.

Väčšinu týchto vlastností však možno vynechať, pretože ich predvolené hodnoty najčastejšie úplne uspokoja väčšinu úloh pri vytváraní animácií. Niektoré z nich nemusia byť napísané, ale zvyšok by mal byť uvedený v poradí, o ktorom sme hovorili vyššie. Vo všeobecnosti, aby vaša animácia fungovala, potrebujete v zloženom vlastníctve iba dva parametre – názov ( názov-animácie) a trvanie ( trvanie animácie).

Animácia CSS3 je pomerne široko používaná. Nastal čas, aby aj tí najzačiatočnejší tvorcovia webových stránok pochopili, čo je animácia CSS a ako ju vytvoriť. Možno si myslíte, že animácia CSS3 je o pohybe blokov a vyzerá to ako karikatúra. Ale animácia CSS nie je len o presúvaní prvku z jedného bodu do druhého, ale aj o skreslení a iných transformáciách. Aby to bolo jasné aj začiatočníkom, všetko som spísal krok za krokom.

1. Základné vlastnosti CSS3 animácie

Malý teoretický blok, z ktorého pochopíte, ktoré vlastnosti CSS3 sú zodpovedné za animáciu, ako aj aké hodnoty môžu nadobudnúť.

• názov-animácie— jedinečný názov animácie (kľúčové snímky, o nich budeme hovoriť nižšie).
• trvanie animácie— trvanie animácie v sekundách.
• funkcia animácie-časovania— krivka zmeny rýchlosti animácie. Na prvý pohľad je to veľmi nejasné. Vždy je jednoduchšie ukázať príklad a uvidíte ich nižšie. Môže nadobúdať tieto hodnoty: lineárne | ľahkosť | uvoľnenie | uvoľnenie | cubic-bezier(n,n,n,n) .
• animácia-oneskorenie— oneskorenie v sekundách pred spustením animácie.
• animácia-iterácia-počet— počet opakovaní animácie. Dá sa zadať buď jednoducho ako číslo, alebo môžete zadať nekonečno a animácia pobeží donekonečna.

Tu sú len základné vlastnosti, ktoré sú viac než dostatočné na vytvorenie vašej prvej CSS3 animácie.

Posledná vec, ktorú potrebujeme vedieť a pochopiť z teórie, je ako vytvoriť kľúčové snímky. Je to tiež jednoduché a robí sa to pomocou pravidla @keyframes, v rámci ktorého sú špecifikované kľúčové snímky. Syntax tohto pravidla je nasledovná:

Vyššie nastavíme prvý a posledný rámec. Všetky medzistavy budú vypočítané AUTOMATICKY!

2. Skutočný príklad animácie CSS3

Teória, ako inak, je nudná a nie vždy jasná. Je oveľa jednoduchšie vidieť všetko pomocou skutočného príkladu, ale najlepšie je to urobiť sami na nejakej testovacej HTML stránke.

Keď sa učíte programovací jazyk, zvyčajne napíšete program „Ahoj, svet!“, z ktorého pochopíte syntax tohto jazyka a niektoré ďalšie základné veci. Ale neštudujeme programovací jazyk, ale popisný jazyk vzhľad dokument. Preto budeme mať svoje vlastné "Ahoj, svet!"

Tu je to, čo urobíme napríklad: nech máme nejaký blok