CSS animacija za najmlajše. Animacijski primeri CSS in že pripravljena koda Vrste animacije css

To smo pred kratkim videli prehodi je samo način animacije lastnosti sloga iz Izvirnik prej konec države.

Torej so prehodi v CSS specifične po vrsti animacije, kjer:

sta samo dve državi: začetek in konec;
animacija ni zanka;
vmesna stanja nadzoruje le funkcija časa.

Ampak kaj, če hočeš:

imeti nadzor nad vmesno države?
za zanko animacija?
naredite različne vrste animacij za eno predmet?
animirajte samo določeno lastnost na polovica pot?
posnemati različne časovne funkcije za različne lastnosti?

Animacija v CSS omogoča vse to in še več.

Animacija je kot mini film, kjer kot režiser dajete navodila (pravila sloga) svojim igralcem (elementi HTML) za različne prizore (ključne kadre).

Lastnosti animacije

Tako kot prehod je tudi lastnost animacije skrajšano za nekaj drugih:

animation-name: ime animacije;
trajanje animacije: kako dolgo traja animacija;
animacija-časovna funkcija: kako se izračunajo vmesna stanja;
animacija-zakasnitev: animacija se začne čez nekaj časa;
animation-iteration-count: kolikokrat naj se animacija izvede;
animation-direction: naj gre gibanje v nasprotni smeri ali ne;
animation-fill-mode: kateri slogi se uporabljajo, preden se animacija začne in po koncu.

Hiter primer

Če želite animirati gumb za prenos, lahko napišete animacijo poskakovanje:

@keyframes odbijajo (0% (spodaj: 0; box-shadow: 0 0 5px rgba (0,0,0,0.5);) 100% (spodaj: 50px; box-shadow: 0 50px 50px rgba (0,0, 0,0,1);)) .gumb za nalaganje (animacija: poskakivanje 0,5s kubični-bezier (0,1,0,25,0,1,1) 0s neskončno izmenično oboje;)

Najprej morate napisati pravo poskakujočo animacijo z uporabo @keyframes in jo poimenovati.

uporabil sem skrajšano lastnost animacije in vključuje vse možne možnosti:

animation-name: odskočna (ujema se z imenom ključnih sličic)
Trajanje animacije: 0,5 s (pol sekunde)
animacija-časovna funkcija: kubični-bezier (0.1,0.25,0.1,1)
animacija-zakasnitev: 0s (brez zamude)
animation-iteration-count: neskončno (neskončno predvajanje)
smer animacije: nadomestna (gre naprej in nazaj)
Animation-fill-mode: oboje

@ključni okvirji

Pred animacijo elementov HTML potrebujete pisanje animacije z uporabo ključnih kadrov... Na splošno so ključni okvirji vsi vmesni korak v animaciji. Določeni so z uporabo odstotkov:

0% - prvi korak animacije;
50 % je polovični korak v animaciji;
100% je zadnji korak.

Uporabite lahko tudi ključne besede od in do namesto 0% oziroma 100%.

Določite lahko poljubno število ključnih sličic, na primer 33%, 4% ali celo 29,86%. V praksi jih boste napisali le nekaj.

Vsak ključni okvir je Pravilo CSS, to pomeni, da lahko pišete lastnosti CSS kot običajno.

Če želite definirati animacijo, preprosto napišite ključno besedo @keyframes z njenim naslov:

@ključni okvirji okoli (0% (levo: 0; zgoraj: 0;) 25% (levo: 240px; zgoraj: 0;) 50% (levo: 240px; zgoraj: 140px;) 75% (levo: 0; zgoraj: 140px ;) 100 % (levo: 0; zgoraj: 0;)) p (animacija: približno 4s linearno neskončno;)

Upoštevajte, da vsebujeta začetni 0% in končni 100%. enaka pravila CSS. To bo zagotovilo popolno zanko animacije. Ker je števec ponovitev nastavljen na neskončno, bo animacija šla od 0% do 100%, nato pa takoj nazaj na 0% in tako naprej.

ime animacije

ime uporablja se vsaj animacija dvakrat:

pri pisanje animacije z @keframes;
pri z uporabo animacije, ki uporabljajo lastnost animation-name (ali okrajšano lastnost animacije).

@keyframes karkoli (/ * ... * /) .selektor (ime-animacije: karkoli;)

Tako kot imena razredov CSS lahko tudi imena animacij vključujejo samo:

črke (a-z);
številke (0-9);
podčrtaj (_);
vezaj (-).

Ime se ne sme začeti s številko ali z dvema vezajema.

animacija-trajanje

Tako kot trajanje prehoda lahko nastavite tudi trajanje animacije sekundah(1s) oz milisekundah(200 ms).

Izbirnik (trajanje animacije: 0,5 s;)

Privzeto je 0s, kar pomeni, da sploh ni animacije.

animacija-časovna funkcija

Podobno kot časovne funkcije za prehode lahko uporabite tudi časovne funkcije za animacijo ključne besede kot so linearni, ease-out ali se lahko definirajo s poljubno Bezierove krivulje.

Izbirnik (funkcija časovne-časovne animacije: enostavnost vstopa;)

Privzeto je enostavnost.

Ker animacije CSS uporabljajo ključne okvire, lahko nastavite linearno funkcija časa in simulirati določeno Bezierjevo krivuljo z definiranjem veliko zelo specifičnih ključni okvirji. Oglejte si Bounce.js za vrhunske animacije.

animacija-zakasnitev

Tako kot pri zakasnitvi prehoda lahko tudi zakasnitev animacije nastavite na sekundah(1s) oz milisekundah(200 ms).

Privzeta vrednost je 0s, kar pomeni, da ni zamude.

Uporabno, če je vključenih več animacij serija.

A, .b, .c (animacija: skakanje 1s;) .b (zakasnitev animacije: 0,25 s;) .c (zakasnitev animacije: 0,5 s;)

število ponovitev animacije

Privzeto se predvaja samo animacija enkrat(vrednost 1). Nastavite lahko tri vrste vrednosti:

cela števila, na primer 2 ali 3;
ulomna števila, kot je 0,5, ki bo predvajala samo polovico animacije;
neskončno ključno besedo, ki bo animacijo ponavljala za nedoločen čas.

.selektor (število ponovitev animacij: neskončno;)

animacija - režija

Lastnost animation-direction določa v kakšnem vrstnem redu ključni kadri se preberejo.

normalno: začne se pri 0 %, konča pri 100 %, spet se začne pri 0 %.
obratno: začne se pri 100 %, konča pri 0 %, ponovno se začne pri 100 %.
nadomestno: začne se pri 0%, gre na 100%, se vrne na 0%.
alternativno-obrnjeno: začne se pri 100 %, gre na 0 %, se vrne na 100 %.

To si je lažje predstavljati, če je število ponovitev animacije nastavljeno na neskončno.

animacijski način polnjenja

Lastnost animation-fill-mode določa, kaj se zgodi spredaj začetek animacije in po njeno dokončanje.

Pri določanju ključno osebje lahko določite Pravila CSS ki bo uporabljen v različnih korakih animacije. Zdaj lahko ta pravila CSS Trčiti s tistimi, ki že uporabljeno na animirane elemente.

animation-fill-mode vam omogoča, da brskalniku poveste, če stili animacije tudi bi moral veljati zunaj animacije.

Predstavljajmo si gumb, kateri je:

rdeča privzeto;
postane modra na začetku animacije;
in na koncu zelena ko je animacija končana.

Zadnja posodobitev: 06.11.2016

Animacija ponuja velike možnosti za spreminjanje sloga elementa. Ob prehodu imamo nabor lastnosti z začetnimi vrednostmi, ki jih ima element pred začetkom prehoda, in končnimi vrednostmi, ki so nastavljene po zaključku prehoda. Medtem ko imamo lahko med animacijo ne le dva niza vrednosti - začetni in končni, temveč tudi veliko vmesnih nizov vrednosti.

Animacija temelji na zaporedni spremembi ključnih sličic (ključnih okvirjev). Vsak ključni okvir definira en niz vrednosti za animirane lastnosti. In zaporedne spremembe takih ključnih sličic bodo dejansko predstavljale animacijo.

Pravzaprav prehodi uporabljajo isti model – implicitno sta opredeljena tudi dva ključna okvirja – začetek in konec, sam prehod pa predstavlja prehod od začetnega do končnega ključnega okvirja. Edina razlika pri animaciji v tem primeru je, da lahko za animacijo definirate več vmesnih ključnih sličic.

Na splošno ima izjava ključnega okvira CSS3 naslednjo obliko:

@keyframes animation_name (od (/ * začetne vrednosti lastnosti CSS * /) do (/ * končne vrednosti lastnosti CSS * /))

Ključni besedi @keyframes sledi ime animacije. Nato sta v zavitih oklepajih definirana vsaj dva ključna okvirja. Blok za ključno besedo from je razglašen za začetni ključni okvir, za ključno besedo to v bloku pa je definiran končni ključni okvir. Znotraj vsakega ključnega okvirja je definiranih ena ali več lastnosti CSS, podobno kot je ustvarjen običajen slog.

Na primer, definirajmo animacijo za barvo ozadja elementa:

Animacija v CSS3

V tem primeru se animacija imenuje backgroundColorAnimation. Animacija ima lahko poljubno ime.

Ta animacija omogoča prehod iz rdečega v modro ozadje. Po koncu animacije se nastavi barva, ki je definirana za element div.

Če želite elementu priložiti animacijo, se njegova lastnost animation-name uporabi v njegovem slogu. Vrednost te lastnosti je ime animacije, ki jo je treba uporabiti.

Prav tako morate z uporabo lastnosti trajanja animacije nastaviti čas animacije v sekundah ali milisekundah. V tem primeru je čas animacije 2 sekundi.

S to definicijo se bo animacija začela takoj po nalaganju strani. Lahko pa sprožite tudi animacije na podlagi dejanj uporabnika. Na primer, z definiranjem sloga za psevdorazred: hover, lahko definirate animacijo, ki se začne, ko se miška premakne nad element:

@keyframes backgroundColorAnimation (od (barva ozadja: rdeča;) do (barva ozadja: modra;)) div (širina: 100px; višina: 100px; rob: 40px 30px; obroba: 1px trdna # 333; barva ozadja: # ccc;) div: lebdenje (ime-animacije: backgroundColorAnimation; trajanje animacije: 2 s;)

Veliko ključnih okvirjev

Kot je navedeno zgoraj, animacija poleg dveh standardnih ključnih sličic omogoča uporabo številnih vmesnih. Za definiranje tween se uporabi odstotek animacije, v kateri je treba uporabiti tween:

@keyframes backgroundColorAnimation (od (barva ozadja: rdeča;) 25 % (barva ozadja: rumena;) 50 % (barva ozadja: zelena;) 75 % (barva ozadja: modra;) do (barva ozadja: vijolična ;))

V tem primeru se animacija začne z rdečo. Po 25 % časa animacije se barva spremeni v rumeno, po nadaljnjih 25 % v zeleno itd.

Prav tako lahko animirate več lastnosti v enem ključnem kadru hkrati:

@keyframes backgroundColorAnimation (od (barva ozadja: rdeča; motnost: 0,2;) do (barva ozadja: modra; motnost: 0,9;))

Določite lahko tudi več ločenih animacij, vendar jih uporabite skupaj:

@keyframes backgroundColorAnimation (od (barva ozadja: rdeča;) do (barva ozadja: modra;)) @keyframes opacityAnimation (od (prosojnost: 0,2;) do (prosojnost: 0,9;)) div (širina: 100px; višina: 100px; rob: 40px 30px; obroba: 1px trdna # 333; barva ozadja: #ccc; ime-animacije: backgroundColorAnimation, opacityAnimation; trajanje animacije: 2s, 3s;)

Animacije so navedene kot vrednost lastnosti animation-name, ločene z vejicami, čas teh animacij pa je nastavljen tudi z vejicami v lastnosti animation-duration. Ime animacije in njen čas se ujemata s položajem, to pomeni, da bo animacija opacityAnimation trajala 3 sekunde.

Zaključek animacije

Na splošno se po koncu časovnega intervala, določenega z lastnostjo animation-duration, tudi animacija konča. Vendar pa lahko s pomočjo dodatnih lastnosti to vedenje preglasimo.

Lastnost animation-iteration-count na primer določa, kolikokrat se bo animacija ponovila. Na primer, 3 animacije se ponovijo zapored:

Število ponovitev animacije: 3;

Če želite, da se animacija izvaja neskončno število krat, je tej lastnosti dodeljena vrednost neskončno:

Število ponovitev animacij: neskončno;

Ko ponovite, se bo animacija začela znova od začetnega ključnega okvirja. Toda z animacijo-smer: alternativno; v nasprotni smeri animacije, ko se ponavlja. To pomeni, da se bo začel na končnem ključnem kadru, nato pa bo prišlo do prehoda na začetni okvir:

Ime-animacije: backgroundColorAnimation, opacityAnimation; animacija-trajanje: 2s, 2s; število ponovitev animacije: 3; režija animacije: nadomestna;

Ko se animacija konča, brskalnik nastavi slog za animirani element na slog, ki bi ga imel, preden je bila animacija uporabljena. Toda lastnost animation-fill-mode: forwards vam omogoča, da nastavite končno vrednost animirane lastnosti točno tisto, ki je bila v zadnjem okvirju:

Ime-animacije: backgroundColorAnimation; animacija-trajanje: 2s; število ponovitev animacije: 3; režija animacije: nadomestna; animacijski način polnjenja: naprej;

Zakasnitev animacije

Z lastnostjo zakasnitve animacije lahko določite čas zakasnitve animacije:

Ime-animacije: backgroundColorAnimation; animacija-trajanje: 5s; animacija-zakasnitev: 1s; / * 1 sekundna zamuda * /

Funkcija gladkosti animacije

Tako kot pri prehodih lahko tudi za animacije uporabite vse enake funkcije lajšanja:

linearna: funkcija linearne gladkosti, lastnost se sčasoma enakomerno spreminja

ease: funkcija ease, ki pospeši animacijo proti sredini in upočasni proti koncu, kar zagotavlja bolj naravno spremembo

ease-in: funkcija ease, ki pospeši samo na začetku

ease-out: funkcija ease, ki pospeši samo na začetku

ease-in-out: funkcija za enostavnost, ki pospeši animacijo proti sredini in upočasni proti koncu, kar zagotavlja bolj naravno spremembo

cubic-bezier – Za animacijo uporabite funkcijo kubičnega bezierja

Lastnost funkcije-časovne animacije se uporablja za nastavitev funkcije gladkosti:

@keyframes backgroundColorAnimation (od (barva ozadja: rdeča;) do (barva ozadja: modra;)) div (širina: 100px; višina: 100px; rob: 40px 30px; obroba: 1px trdna # 333; ime-animacije: backgroundColorAnimation ; trajanje animacije: 3 s; funkcija časovne razporeditve animacije: enostavno vstavljanje;)

Lastnost animacije

Lastnost animacije je kratek način definiranja zgornjih lastnosti:

Animacija: animacija-ime animacija-trajanje animacija-časovna-funkcija animacija-število ponovitev animacija-smer animacija-zakasnitev animacija-fill-način

Prva dva parametra, ki zagotavljata naslov in čas animacije, sta obvezna. Preostale vrednosti so neobvezne.

Vzemimo naslednji niz lastnosti:

Ime-animacije: backgroundColorAnimation; animacija-trajanje: 5s; funkcija časovne-časovne animacije: enostavnost vstavljanja; število ponovitev animacije: 3; režija animacije: nadomestna; animacija-zakasnitev: 1s; animacijski način polnjenja: naprej;

Ta niz bo enakovreden naslednji definiciji animacije:

Animacija: backgroundColorAnimation 5s enostavno vstavljanje 3 nadomestne 1s naprej;

Izdelava pasice z animacijo

Kot primer z animacijo ustvarimo preprosto animirano pasico:

HTML pasica

Hkrati se odvijajo tri animacije. Animacija "pasica" spremeni barvo ozadja pasice, medtem ko animaciji text1 in text2 prikažeta in skrijeta besedilo z uporabo nastavitev preglednosti. Ko je prvo besedilo vidno, drugo ni vidno in obratno. Tako dobimo animacijo besedila v pasici.

Animacija CSS3 se pogosto uporablja. Čas je, da ugotovimo, kaj je CSS animacija in kako jo ustvariti, tudi najbolj začetnikom izdelovalcem spletnih mest. Morda mislite, da je animacija CSS3 namenjena premikanju blokov in je videti kot risanka. Toda animacija CSS ni samo premikanje elementa iz ene točke v drugo, temveč tudi popačenje in druge transformacije. Da bo jasno tudi začetnikom, sem vse opisal po korakih.

1. Osnovne lastnosti CSS3 animacije

Majhen teoretični blok, iz katerega boste razumeli, katere lastnosti CSS3 so odgovorne za animacijo, pa tudi, katere vrednosti lahko sprejmejo.

ime animacije- edinstveno ime animacije (ključni okvirji, o njih bomo govorili spodaj).
animacija-trajanje- trajanje animacije v sekundah.
animacija-časovna funkcija- krivulja hitrosti animacije. Na prvi pogled je zelo nerazumljivo. Vedno je lažje prikazati s primerom in videli jih boste spodaj. Lahko ima naslednje vrednosti: linearno | enostavnost | enostavnost | olajšanje | kubični-bezier (n, n, n, n).
animacija-zakasnitev- zamuda v sekundah pred začetkom animacije.
število ponovitev animacije- število ponovitev animacije. Določeno je preprosto s številko ali pa lahko določite neskončno in animacija se bo izvajala neomejeno.

Tukaj so le osnovne lastnosti, ki so več kot dovolj za ustvarjanje vaše prve animacije CSS3.

Zadnja stvar, ki jo moramo vedeti in razumeti iz teorije, je, kako ustvariti ključne okvire. To je tudi enostavno narediti in se izvaja s pravilom @keyframes, znotraj katerega so navedeni ključni okvirji. Sintaksa za to pravilo je naslednja:

Zgoraj smo postavili prvi in zadnji okvir. Vsa vmesna stanja se izračunajo AVTOMATSKO!

2. Pravi primer CSS3 animacije

Teorija je kot običajno dolgočasna in ni vedno jasna. Veliko lažje je vse videti s pravim primerom, najbolje pa je, da to storite sami na kakšni testni HTML strani.

Pri učenju programskega jezika običajno napišejo program "Hello, world!" A ne preučujemo programskega jezika, temveč jezik za opis videza dokumenta. Zato bomo imeli svoj "Pozdravljeni, svet!"

Evo, kaj bomo naredili za primer: naj imamo nekakšen blok

bo sprva širok 800 slikovnih pik in se v 5 sekundah skrči na 100 slikovnih pik.

Zdi se, da je vse jasno - blok morate samo stisniti

in to je to! Poglejmo, kako je videti v resnici.

Najprej oznaka HTML. Zelo preprosto je, ker delamo samo z enim elementom na stran.

1	<div razred = "toSmallWidth">

In tukaj je, kaj je v slogovni tabeli:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (margin: 20px auto; / * 20 slikovnih pik na vrhu in na dnu ter poravnava na sredini * / ozadje: rdeče; / * rdeče ozadje za blok * / višina: 100px; / * višina bloka 100 slikovnih pik * /širina: 800px; / * začetna širina 800 slikovnih pik * /-webkit-ime-animacije: animWidthSitetukaj; -webkit-animacija-trajanje: 5s; / * lastnost s predpono za brskalnike Chrome, Safari, Opera * / ime-animacije: animWidthSitetukaj; / * določite ime ključnih okvirjev (spodaj) * / animacija-trajanje: 5s; / * nastavite trajanje animacije * / } / * ključni okvirji s predpono za brskalnike Chrome, Safari, Opera * / @ -webkit-keyframes animWidthSite tukaj ( od (širina: 800px;) do (širina: 100px;)) @keyframes animWidthSite tukaj ( od (širina: 800px;) / * prvi ključni okvir, kjer je širina bloka 800 slikovnih pik * / do (širina: 100px;) / * zadnji ključni okvir, kjer je širina bloka 100 slikovnih pik * / }

Kot lahko vidite, smo določili le prvi in zadnji ključni okvir, vsi vmesni pa so bili "zgrajeni" samodejno.

Vaša prva animacija CSS3 je pripravljena. Za utrjevanje pridobljenega znanja ustvarite dokument HTML in datoteko CSS ter tja vstavite (ali bolje vtipkajte ročno) kodo iz primera. Potem boste zagotovo vse razumeli. Nato poskusite narediti enako z višino bloka (v višino se mora zmanjšati), da pritrdite material.

3. Primeri animacije CSS3 so bolj zapleteni

Zgoraj ste izvedeli, kako enostavno je ustvariti animacije CSS3. Če ste to poskušali narediti z lastnimi rokami, ste že razumeli celoten postopek in zdaj želite vedeti, kako lahko ustvarite bolj zapleteno in lepšo animacijo. In res ga je mogoče ustvariti. Spodaj so 3 lekcije, kjer je animacija ustvarjena na enak način kot v zgornjem primeru.

Praksa razvoja spletnih virov je privedla do dveh pomembnih trendov: hitrosti in kakovosti zaznavanja. Prvi zavezuje razvijalca, da hitro opravi svoje delo, drugi - določa meje koristnega.

Obiskovalec pri obisku strani zasleduje določen cilj in ga vodijo splošno sprejete ideje o tem, kje se kaj nahaja in kako naj deluje. Razvijalec lahko opravlja svoje delo, kot mu ustreza, če pa ga zanima pritegniti pozornost večjega števila obiskovalcev, potem je neprimerno ignorirati njihovo mnenje.

Sintaksa in semantika animacije

Lastnost animacije CSS je enostavna za uporabo in vam omogoča hitro ustvarjanje zanimivih učinkov. Ni vam treba biti pameten in oblikovati lastne animacije, da bi se elementi spletne strani obnašali na sodoben način, kot ga pričakuje obiskovalec. Vse deluje po definiciji, pričakovano in zahtevano.

Ta primer opisuje dva elementa. Prvi je indikatorski trak, ki se premika v desno in se sorazmerno povečuje. Drugi element je slika, ki se preprosto premakne v desno.

Tukaj niso prikazani vsi okvirji. Lastnost se v tem primeru izvaja gladko. Obiskovalec strani opazuje gladko gibanje s povečanjem volumna črte in premikanje slike. Z uporabo različnih možnosti gibanja namesto tipa eaase-in-out je gibanje mogoče nadzorovati. Možnost eaase-in-out omogoča pospeševanje na začetku in upočasnitev na koncu, vendar lahko izberete drugo možnost gibanja.

Prekrivanje in interakcija elementov

Vse elemente, ki imajo lastnost animacije, CSS obravnava neodvisno drug od drugega in od celotnega poteka strani. Če se elementi prekrivajo drug na drugega, dobimo kombinacijo učinkov in posledično nov učinek.

Če v procesu animacije elementi spremenijo svoje lastnosti, potem lahko zaradi zakonov prekrivanja barv dobite zelo izvirne učinke le z dvema ali tremi elementi.

Risba elementa je zelo pomembna. V danem primeru se iz slike oblikuje trak, na katerem sta dve črti različnih barv. Ko se velikost traku poveča, je to žaga; ko se žaga premika, je gibljiv val. Z manipuliranjem s črtami in njihovim naklonom lahko ustvarite učinke v skladu s splošnimi zakoni grafike.

Sprememba časa animacije vodi tudi do nestandardnih rešitev. Uporaba lastnosti transformacije, kot je funkcija vrtenja elementa, ustvari izvirne spremembe. Primer:

Tu trak nenehno spreminja svoj videz iz neprozornega v prozornega. V tem primeru spodnja slika samo spremeni svojo obliko.

Informacije o animaciji

V CSS: besedilna animacija ima poseben pomen. Besedilo je vedno pomembno in je prisotno na spletni strani za določen namen. Toda besedilo je vedno manj informativno od slike in zavzame veliko prostora.

Jamstvo, da bo obiskovalec pravilno napisano besedilo ustrezno zaznal, je veliko večje od upanja na pravilno razumevanje slike, še posebej, če ima oblikovalec spletnega mesta svojo predstavo o oblikah izražanja pomena.

Če je bila prej, ko je animacija CSS šele prišla v svet postavitve, plazeče črte, utripajoče ure, pulzirajoča besedila priljubljena, v sodobni gradnji spletnih mest velja za normalno načelo: ne da bi motili obiskovalca, čim bolj učinkovito predstavite funkcionalnost spletnega vira. kolikor je mogoče.

V tem kontekstu je kateri koli od zgornjih primerov primeren za predstavitev besedilnih informacij, vendar je uporaba CSS kot 3D animacije najbolj praktična.

Tukaj, v "normalnem" stanju, besedilo zavzame malo prostora. Lahko poudarite glavno besedo ali določite pomen. Takoj, ko se miška pomakne nad območje besedila, se razgrne iz 3D animacije CSS v normalno berljivo stanje.

Možnost prihranka prostora v kombinaciji s 3D dizajnom omogoča kompaktno namestitev informacij. Izpraznjeni prostor se lahko uporabi za druge ali sorodne namene. Z animacijo CSS bodo informacije, ki jih potrebujete, na voljo ob pravem času.

Potrošniška animacija

Opazni uspehi pri ustvarjanju visokokakovostnih spletnih virov še vedno izpuščajo eno nenavadno zastavljeno vprašanje: zakaj je oblikovanje strani skrb razvijalca?

Spletno mesto ni umetniško delo in ni rezultat ustvarjalnega procesa v estetske namene. Stran je predvsem funkcionalnost, ki bo po mnenju lastnika (razvijalca) nanjo pripeljala nove obiskovalce in omogočila sodelovanje z njihovimi strankami.

Prodati izdelek, opraviti storitev, opraviti določeno delo ... Obiskovalec pride po blago, storitve in dela. Pomembna sta oblikovanje in animacija, vendar je še vedno pomembnejše mnenje obiskovalca kot mnenje lastnika (razvijalca).

Če ima kupec v običajni trgovini vedno prav, zakaj bi potem v spletni trgovini delal vse tako, kot se je razvil razvijalec s predlagano možnostjo oblikovanja? Animacija v kontekstu CSS je odlično orodje, a zakaj ne bi šli še malo dlje: kot veliko potrošnikov, obstaja toliko možnosti za izražanje funkcionalnosti in oblikovanja.

Različica "animacije potrošnikov" je, ko obstaja tisto, kar je predlagal razvijalec, in kaj so izbrali prejšnji potrošniki in kaj si je trenutni potrošnik zamislil.

Pozdravljeni prijatelji! Danes si bomo ogledali zanimivo temo - ustvarjanje CSS animacij na resničnem primeru. Ta vadnica bo dosegla vrhunec pri ustvarjanju čudovite animacije logotipa CSS za milijon dolarjev.

razred

Zapin

Učna gradiva

Viri: Prenesi
Osnovni primer iz vadnice: https://codepen.io/agragregra/pen/PKNavm
Začetna predloga iz vadnice: https://github.com/agragregra/optimizedhtml-start-template

Malo teorije

Preden začnete ustvarjati animirani primer, preberite osnove. CSS animacije, upoštevajte osnovne izraze, lastnosti in pravila za ustvarjanje CSS animacij.

Če ste že imeli izkušnje z ustvarjanjem animacij v kateri koli aplikaciji, kot je Adobe After Effects ali starejši Flash Professional (zdaj Adobe Animate), potem bi morali poznati koncepte, kot so ključni kadri, časovne funkcije ali dinamika gibanja. », kar npr. na katerem koli drugem področju animacije, se uporabljajo za animacijo elementov na strani z uporabo CSS. Vendar pa za razliko od dela z vmesniki aplikacij ustvarite svoje animacije CSS tako, da v urejevalnik napišete kodo.

Pravilo CSS @keyframes

Ustvarjanje animacije CSS se začne z razglasitvijo imena animacije v bloku @ključni okvirji in definiranje tako imenovanih korakov animacije ali ključnih kadrov.

Za pregled teorije in osnov bomo uporabili čisti CSS, v prihodnje pa bomo s kompleksnejšim primerom povezali uporabo predprocesorja Sass. Več o Sassu lahko izveste v vadnici. Poleg tega vam za globlje razumevanje osnov CSS priporočam, da preberete lekciji "Osnove CSS - Vodnik za najmlajše" in "Vsi izbirniki CSS v eni lekciji"

Oglejmo si strukturo @keyframes in ključne okvire s preprostim primerom:

@ključni okvirji obračanje (0% (polmer obrobe: 0 0 0 0; transformacija: vrtenje (0 stopinj);) 25% (polmer obrobe: 50% 0 0 0; preoblikovanje: vrtenje (45 stopinj);) 50% (obroba- polmer: 50% 50% 0 0; transformacija: vrtenje (90 stopinj);) 75% (polmer meje: 50% 50% 50% 0; transformacija: vrtenje (135 stopinj);) 100% (polmer meje: 50% 50 % 50 % 50 %; transformacija: zavrti (180 stopinj);))

V prvi vrstici vidimo, da za ključno besedo @keyframes sledi njeno ime "obračanje". To je ime bloka ključnih sličic, ki ga bomo sklicevali spodaj.

Po deklaraciji se odpre zavit oklepaj (v tem primeru v čistem CSS), v katerem so lastnosti za vsak ključni okvir zapisane zaporedno od 0 % do 100 %. Upoštevajte, da lahko med 0% in 100% vstavite toliko vmesnih vrednosti, kot želite, naj bo to 50%, 75% ali celo 83%. To je zelo podobno časovni premici aplikacije za animacijo, kjer lahko dodate katero koli vmesno stanje med obema stanjema.

Nadalje lahko ta blok kode s ključnimi okvirji uporabimo za kateri koli selektor CSS, vendar so najpogosteje pripravljeni za določen selektor, če želimo doseči določeno obnašanje iz želenega bloka.

Sklicuje se na blok ključnih sličic

Ko smo za objekt nastavili ključne okvire (v resničnem življenju to poteka vzporedno ali celo po dostopu do bloka s ključnimi okvirji), se lahko obrnemo na naš novo izdelani blok. Oglejmo si naslednjo preprosto kodo iz zgornjega primera:

Div (širina: 120 slikovnih pik; višina: 120 slikovnih pik; barva ozadja: vijolična; rob: 100 slikovnih pik; animacija: obračanje 2s ease-out 1s neskončno alternativno;)

Nič posebnega do zadnje vrstice. Tukaj definiramo, kako bo objekt na začetku videti, v zadnji vrstici bloka pa se sklicujemo na blok ključnih sličic z imenom "obračanje":

Animacija: obračanje 2s ease-out 1s neskončno nadomestno;

Če je z definicijo ključnih okvirjev vse relativno jasno, potem ta vrstica potrebuje takojšnjo razlago. Kot lahko vidimo, najprej pride lastnost CSS "animacija". To je skrajšana oblika zapisa, kot je lastnost "margin: 20px 30px 40px 50px", ki jo je mogoče razdeliti na več ločenih lastnosti:

Po analogiji lahko sestavljeno lastnost animacije razdelimo na več ločenih lastnosti:

ime animacije	Ime animacije, na katero se sklicuje @keyframes
animacija-trajanje	Trajanje ali čas, ki je potreben za izvedbo animacije CSS. Lahko se nastavi v sekundah (s) ali milisekundah (ms)
animacija-časovna funkcija	Časovna funkcija, dinamika premikanja predmeta ali spremembe lastnosti ( enostavnost- (privzeto) animacija se začne počasi, pospešuje in počasi konča; linearno- animacija poteka enakomerno; enostavnost vnosa- se začne počasi in pospešuje do zadnjega ključnega kadra; olajšanje- hitro se začne in na koncu postopoma upočasni; enostavnost vstopa- se začne počasi in počasi konča)
animacija-zakasnitev	Čas zakasnitve animacije PRED začetkom. Nastavljeno tudi v sekundah ali milisekundah.
število ponovitev animacije	Število ponovitev (iteracij) animacije ( neskončno- neskončno ali pa lahko nastavite praštevilo brez enot)
animacija - režija	Smer animacije, zaporedna, vzvratna ali povratna ( normalno- (privzeto) animacija se predvaja od začetka do konca in se ustavi; nadomestni- igra od začetka do konca in v nasprotni smeri; alternativno-obrnjeno- igra od konca do začetka in nazaj; vzvratno- animacija se predvaja od konca.)
animacija-igra-stanje	Nadzor predvajanja animacije ( začasno ustavljen(pavza), tek(zagon) itd.). Po potrebi se lahko uporabi na: lebdeči ali iz funkcije JS
animacijski način polnjenja	Stanje elementa pred in po predvajanju animacije. Na primer vrednost nazaj omogoča vrnitev vseh lastnosti v prvotno stanje takoj po uporabi animacije

Najpogosteje izkušeni razvijalci vseh teh lastnosti ne pišejo ločeno, ampak uporabljajo kratek zapis in njegova struktura je naslednja:

animacija: (1.ime-animacije - ime) (2.trajanje-trajanje - trajanje) (3.dinamika-časovne funkcije animacije) (4.zakasnitev animacije - pavza pred začetkom) (5.iteracija-animacija- count - število izvedb) (6.animation-direction - direction)

Animacija: animationname 2s linearna 1s neskončno obratno

Iz primera vidimo, da se sklicujemo na blok @keyframes animationname, nastavite trajanje animacije na 2 sekundi, dinamika je linearna, pavza pred zagonom je 1 sekunda, animacija se neskončno ponavlja in teče v nasprotni smeri.

Kot sem že rekel, se kratek zapis začne z " animacija«, Sledijo vrednosti, katerih zaporedja je bolje, da ne pozabite, da ne bo zmede pri pisanju CSS animacij.

Vendar pa je večino teh lastnosti mogoče izpustiti, saj bodo večino časa njihove privzete vrednosti ustrezale večini potreb po animaciji. Nekatere od njih je mogoče izpustiti, ostale pa je treba navesti v zaporedju, ki smo ga obravnavali prej. Na splošno, da vaša animacija deluje, potrebujete samo dva parametra v sestavljeni lastnosti - ime ( ime animacije) in trajanje ( animacija-trajanje).