Muutke oma veebilehed ellu CSS-animatsioonide ja üleminekutega

Veebilehe kujundus areneb pidevalt. Alates tundlikust disainist, ilusast tüpograafiast, täiuslikest värvikoodiskeemidest ja illustratsioonidest pakuvad veebisaidi loojad iga päev uusi ideid ja kujundusi.

Tänapäeval on kasutajatel kõrged ootused kasutajaliideste suhtes, kuna nii kõrge kvaliteediga sisu on Internetis saadaval. Veebisaidi liideste arenedes areneb ka nende taga olev tehnoloogia. Üks põhikomponent, mis vastutab veebisaidi liidese täiustamise eest, on CSS.

CSS või Cascading Style Sheets vastutavad selle eest, et saidid oleksid interaktiivsed, määratledes nende stiili, paigutuse ja kujundused. CSS-i uusim standard, st CSS3, on kasutusele võtnud animatsioonide ja teisenduste kontseptsiooni, mis täiustavad kasutajakogemust, lisades kasutajaliidesele täiendavat sügavust. CSS-i animatsioonide ja üleminekutega saate jutustada lugusid, luua rikkalikke efekte ning muuta kasutajate suhtlus teie veebisaidiga tõhusaks ja sisukaks.

Animatsioon on lihtsalt liikumise simulatsioon, mis luuakse objektide, näiteks piltide üksteise järel kuvamisel. Üleminek seevastu on põhimõtteliselt protsess, mille käigus objekt muutub ühest olekust teise. Kui aga räägime veebianimatsioonidest, on neid põhimõtteliselt kolme tüüpi – CSS-animatsioonid või võtmekaadri animatsioonid, CSS-i üleminekud ja JavaScripti animatsioonid.

CSS-animatsioonid

Animatsioonide loomiseks CSS-is peame teatud aja jooksul muutma elemendi, näiteks pildi või teksti CSS-i atribuute. Elementide omadusi saame muuta nii mitu korda kui tahame ja saame määrata ka animatsiooni kestuse.

@keyframes määramine

CSS-animatsioonid on määratletud võtmekaadritega. Need võtmekaadrid on animatsiooni vahepunktid. Kõik CSS-animatsioonid on määratud @keyframes reegli all. Need võtmekaadrid määravad, mis juhtub elemendiga konkreetsel hetkel, st

• millised omadused muutuvad
• kui element animeerub
• kuidas element animeerib

Saate määrata oma võtmekaadri järgmiselt:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Siin “kuni” ja “alates” määravad animatsiooni alguse ja lõpu. Samuti saame määrata animatsioonid vahepealsete ajahetkede jaoks alguse ja lõpu vahel järgmiselt:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Siin tähistab 0% animatsiooni algust, 100% animatsiooni lõppu ja 50% tähistab muutust alguse ja lõpu vahel. Kuidas aga öelda brauserile, kui kaua animatsioon peaks toimuma? Teeme seda teatud animatsiooniomaduste abil. Need animatsiooni omadused on seotud animeeritava elemendiga. Näiteks:

element_name
{
animation_property: value;
style_property: value;
}

Siin võib element olla mis tahes HTML-i silt, nagu div, span, img, p jne, ja style_propertysee on mis tahes CSS-i stiiliomadused, nagu background_color, laius, kõrgus jne. Vaatame nüüd mõnda animatsiooni atribuuti üksikasjalikumalt.

1. @keyframes: võtmekaadreid kasutatakse animatsioonikoodi määramiseks, nagu eespool kirjeldatud.
2. animatsiooni nimi: @keyframes määratud nimi on animatsiooni nimi. Seda nime kasutatakse animeeritava elemendiga võtmekaadritele viitamiseks.
3. animation-duration: seda kasutatakse animatsiooni kestuse määramiseks sekundites või millisekundites. Näiteks kui määrame selle 5 sekundiks, kestab animatsioon ainult 5 sekundit. Kui me seda atribuuti ei määra, siis animatsioon ei käivitu üldse, kuna selle vaikeväärtus on 0.
4. animation-delay: saame animatsiooni algust edasi lükata, määrates animatsiooni viivitusaja. Näiteks kui soovite animatsiooni käivitada 5 sekundit pärast lehe brauseris laadimist, määrake animatsiooni viivitus 5 sekundiks.
5. animation-direction: saame brauserile öelda, kas animatsioon liigub vastupidises suunas või vaheldub selle atribuudiga tsükleid. Näiteks kui soovite, et animatsioon töötaks algusest lõpuni, siis määrake animatsiooni kestuse väärtuseks “normaalne”. Kui soovite, et see töötaks otsast alguseni, määrake lihtsalt väärtuseks “tagurpidi”.
6. animation-fill-mode: Saame määrata elemendi stiili, kui animatsioon selles režiimis ei mängi, st kui animatsioon viibib või on lõppenud, siis milline peaks olema elemendi stiil.
7. animation-itration-count: see atribuut tähistab animatsiooni esitamise kordade arvu. Näiteks kui soovite animatsiooni esitada ühe korra, määrake selle väärtuseks 1 või kui soovite, et animatsiooni esitataks igavesti, määrake see lihtsalt olekusse “lõpmatu”.
8. animation-timing-function: seda atribuuti kasutatakse animatsiooni kiiruskõvera (nt lineaarne, kiirendus või aeglustus) määramiseks.
9. Animatsioon: see on kõigi animatsiooni omaduste määramise stenogramm.

Näiteks saate põrkavat objekti animeerida järgmise koodilõigu abil. Pange tähele, kuidas siin on kasutatud animatsiooni stenogrammi.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}
 
.stage:hover .object {
 animation: slide 2s linear;    /*shorthand animation property*/
}
 
.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Üleminekud

CSS-i üleminekuid rakendatakse elementide omadustele teatud aja jooksul, mis põhinevad teatud ajastusfunktsioonidel ehk kergendusfunktsioonidel. Ajastusfunktsiooni all peame silmas funktsiooni, mis muudab elementide omadusi ühest olekust teise, nagu lineaarne progresseerumine, kiirendus või aeglustus. Võib-olla olete märganud, et pilt libiseb või muutub teiseks pildiks, kui hõljutage seda või hiireklõpsuga kostab heli. Need on kõik üleminekuefektid, mis võivad muuta veebisaidi interaktiivseks.

Kergendusfunktsioonid on üleminekute loomisel olulised. Need täpsustavad, kuidas omadused muutuvad. Samuti võivad need muuta kiirust, millega omaduste väärtus muutub ülemineku alguspunktist lõpp-punktini. Saate rakendada üleminekuid järgmisel viisil.

element
{
style_property: value;
transition_property: value;
}

Siin määrab element HTML-i elemendi, mida soovite teisendada (nt div, H1, img jne). style_property on sellele elemendile rakendatud CSS-stiil. Vaatame nüüd mõningaid üleminekuomadusi :

• transfer-property: üleminekuefekti rakendatakse alati elemendi CSS-i atribuudile, nagu selle laius, kõrgus, värv või kuju. Selle atribuudi väärtus määrab elemendi selle CSS-i omaduse. Üleminekuefekt käivitub alati, kui see omadus muutub, näiteks hiirekursori hõljutamisel või klõpsamisel.
• ülemineku-aja funktsioon: see on elemendile rakendatav lihtsusfunktsioon. Seda omadust kasutatakse ülemineku kiiruskõvera määramiseks, nagu sisse-, välja-, lineaar- jne.
• ülemineku kestus: see on täpselt nagu animatsiooni kestuse omadus. Seda kasutatakse üleminekuefekti kestuse määramiseks sekundites või millisekundites. Näiteks kui seame selle väärtuseks 5 sekundit, toimub üleminek 5 sekundiga. Kui me seda atribuuti ei määra, siis üleminekut ei toimu üldse, kuna selle vaikeväärtus on 0.
• transfer-delay: selle atribuudiga saame määrata üleminekuefekti viivitamise aja. Näiteks kui soovite efekti käivitada 5 sekundit pärast hiirekursori hõljutamist, määrake ülemineku viivitus 5 sekundiks.
• üleminek: see on stenogramm kõigi ülaltoodud üleminekuomaduste koostamiseks.

Näiteks muudab järgmine kood elemendi div laiust hiirekursoril. Vaadake siin rakendatud ülemineku stenogrammi atribuuti.

div {
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Animatsioonid vs. üleminekud

Animatsioonide ja üleminekute sarnasused

• Elemendi omaduste muutuste visualiseerimiseks kasutatakse nii üleminekut kui ka animatsiooni.
• Saame määrata kestuse, kui kaua peaks üleminek ja animatsioon toimuma.
• Meil on teatud ajastusfunktsioonid, et muuta nii üleminekute kui ka animatsioonide puhul ühelt väärtuselt teisele ülemineku kiirust.

Animatsioonide ja üleminekute erinevused

• CSS-i üleminekud on reaktiivsed. Need peavad kasutajad käivitama. Animatsioonid aga käivituvad alati, kui leht brauseris laaditakse. Neid ei pea käivitama.
• Üleminekud käivad korra ja peatuvad siis. Seejärel peame neid ikka ja jälle käivitama, samal ajal kui animatsioonid võivad tsüklit teha. Nad võivad alustada oma peatusest ja seejärel uuesti alustada.
• Brauser hoolitseb üleminekute eest ise. Peame lihtsalt täpsustama ülemineku alguse ja lõpu. Me saame määrata üleminekuefekti, kuid me ei saa muuta vahepealse ülemineku muutumise kiirust. Näiteks kui pilt libiseb hiire hõljutamisel, näeme, et see lihtsalt tuhmub või tuhmub, kui hõljutame selle kohal.
• Animatsioonid seevastu pakuvad paindlikkust omaduste muutmiseks alguse ja lõpu vahel. See juhtub võtmekaadrite abil. Näiteks saame animatsiooni esimeseks 5 sekundiks määrata pildi värvi punaseks, järgmiseks 5 sekundiks siniseks, järgmiseks 5 sekundiks roheliseks ja viimaseks 5 sekundiks kollaseks. Seega on meil animatsioonide üle kontroll.

Müüja eesliited

Kõik CSS3 funktsioonid ei toeta kõiki brausereid. Seetõttu kasutame nende CSS-i atribuutide kõrval eesliiteid teatud brauserite jaoks, nagu -webkit- (Safari), -moz- (Firefox) või -o- (Opera). See võimaldab brauseri markeritel lisada sellele CSS3 funktsioonile toe. Neid eesliiteid nimetatakse tarnija prefiksideks või CSS-brauseri eesliiteteks. Seetõttu peame koos animatsiooni- ja üleminekuomadustega panema ka müüja eesliited. Näiteks vaadake allolevat koodi ja vaadake, kuidas on kasutatud Safari tarnija eesliiteid:

div {
width: 100px;
height: 100px;
background: red;
 
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
 
/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Näpunäide! Saate seda segadust vältida, kui kasutate teeke, näiteks -prefix-free. See on JavaScripti teek, mis lisab praeguse brauseri prefiksi mis tahes CSS-koodile. Vaadake paljusid selliseid veebis saadaolevaid teeke.

Järeldus

Veebisaitide arendajad saavad kasutada animatsioone ja teisendusi, et meelitada kasutajaid teie veebisaitidele. Saate neid kasutada vormide, märguannete, taustagraafika, piltide, diagrammide, vigurlogode, tegevusele kutsuvate nuppude ja muu täiustamiseks. Kasutage lihtsalt oma kujutlusvõimet ja leiate viisi, kuidas oma kasutajaid hämmastada. Pidage meeles, et isegi väike muudatus teie veebisaidil võib muuta selle palju paremaks ja suurendada selle väärtust. Niisiis, kas olete oma veebisaidil juba animatsioone kasutanud? Jagage oma mõtteid animatsioonide ja üleminekute kasutamise kohta.