Animatsiooniline veebiarendus: CSS3

Animatsiooniline veebiarendus: CSS3

CSS(3) on kõige tavalisem stiilimiskeel veebilehtedele ning seda võib ka teatud määral ära kasutada animatsioonilises veebiarenduses.

CSSi saab väga hästi ära rakendada just veebilehe väiksemate osade (nagu näiteks lingid) animeerimiseks ja sujuvamaks muutmisel.

CSSi animatsioonid

CSSi animatsioonidega saab animeerida kõiki elemente, mis on HTML’is ära defineeritud.

Tegemist on üsnagi lihtsa süsteemiga, mille jõudlus on väga hea.

Animatsiooni defineerimine CSSis

@keyframes animatsiooni_nimi{
  from{
    css_omadus: css_väärtus;
    /*Teised omadused ka siin*/
  }to{
    css_omadus: css_väärtus;
    /*Teised omadused ka siin*/
  }
}

@keyframes defineerib ära animatsiooni reegli (annab CSS’ile teada, et järgneb animatsioon).

from{} vahele jääb kood, mis tähistab animatsiooni algomadusi ja -väärtusi.

to{} vahele jääb kood, mis tähistab animatsiooni lõppomadusi ja -väärtusi. Tihtipeale on siinsed omadused samad, mis from{} vahel, kuid väärtused on erinevad.

from{}ja to{} asemel võib ka kasutada protsente – 0% kuni 100%. Need annavad suurema kontrolli animeeritavate omaduste ja nende väärtuste üle.

Näiteks 0% tähistab animatsiooni algust ja 75% tähistab animimatsiooni punkti, kus animatsiooni lõpuni on veel jäänud 25%.

Animatsiooni defineerimine CSSis koos protsentidega

@keyframes animatsiooni_nimi{
  0%{
    css_algus_omadus: css_algus_väärtus;
  }
  25%{
    css_25%_omadus: css_25%_väärtus;
  }
  50%{
    css_50%_omadus: css_50%_väärtus;
  }
  75%{
    css_75%_omadus: css_75%_väärtus;
  }
  100%{
    css_lõpp_omadus: css_lõpp_väärtus;
  }
}

Protsendid võivad olla ka 1% jne.

Animatsiooni lisamine elementidele

Animatsioonid muudavad elementide omadusi ja nende väärtusi.

Kuna CSSis luuakse animatsioonid eraldi, siis saab neid kasutada mitmeid kordi mitmetel elementidel.

element{
  animation-name: animatsiooni_nimi;
  animation-direction: normal | reverse | alternate | alternate-reverse;
  animation-duration: Xs | Xms;
  animation-delay: Xs | Xms;
  animation-iteration-count: number | infinite;
  animation-play-state: running | paused;
  animation-fill-mode: none | forwards | backwards | both;
  animation-timing-function: ease | ease-out | ease-in | linear | cubic-bezier(x1, y1, x2, y2);
  animation: ülemiste_omaduste_väärtused;
}

animation-name: animatsiooni_nimi  – defineerib, millist animatsiooni kasutada (@keyframes väärtus).

animation-direction: normal | reverse | alternate | alternate-reverse – animatsiooni suund.

  • normal – animatsiooni suund on selline nagu @keyframes reeglis ära märgitud ehk otsene (animatsiooni tsükli lõppedes hüppab animatsioon järsult algusesse). See on vaikimisi väärtus.
  • reverse – animatsiooni suund on vastupidine (animatsiooni tsükli lõppedes hüppab animatsioon järsult lõppu, et animeerida uut tsüklit tagurpidi).
  • alternate – animatsiooni suund on nii otsene kui ka vastupidine. Tuleb esile kui animatsiooni korratakse rohkem kui üks kord. Ühte animatsiooni tsüklit alustatakse algusest, kuid teist alustatakse vastupidiselt (uut tsüklit ei alustata järsult, vaid sujuvalt minnakse üle algusessse).
  • alternate-reverse – Täpselt sama jutt, mis alternate juures, kuid siin alustatakse animatsiooni ühte tsüklit lõpust ja teist tsüklit siis algusest.

animation-duration: Xs | Xms – ühe animatsiooni tsükli pikkus. Märgitakse ära kas sekundites (s) või millisekundites (ms).

animation-delay: Xs | Xms – animatsiooni viivitus (enne kui animatsioon algab). Märgitakse ära kas sekundites (s) või millisekundites (ms).

animation-iteration-count: number | infinite – animatsiooni kordaja (näitab mitu korda animatsiooni mängitakse).

  • Kui  animation-iteration-count väärtuseks on number või arv, siis korratakse animatsiooni vastavalt numbrile/arvule. Väärtus “1” on vaikimisi.
  • Kui animation-iteration-count väärtuseks on infinite, siis animatsiooni korratakse lõputult.

animation-play-state: running | paused – animatsiooni olek.

  • running – animatsioon mängib. See on vaikimisi väärtus.
  • paused – animatsioon on peatatud.

animation-fill-mode: none | forwards | backwards | both – määrab ära, milline on animatsiooni lõpptulems. See tähendab, et kas animeeritud (uued) omadused ja väärtused jäetakse alles või kasutatakse enne animeerimist defineeritud (vanu) omadusi ja väärtusi.

  • none – ühtegi uut omadust ega väärtust animatsiooni lõppedes elemendile ei lisata. See on vaikimisi
  • forwards – elemendile lisatakse need omadused, mis olid animatsiooni viimases kaadris.
  • backwards – elemendile lisatakse need omadused, mis olid animatsiooni esimeses kaadris.
  • both – elemendile lisatakse need omadused, mis olid animatsiooni esimeses kaadris kui ka viimases kaadris.

animation-timing-function: ease | ease-in | ease-out | linear | cubic-bezier(x1, y1, x2, y2) – määrab ära, milline on animatsiooni ajastus (millal animatsioon kiirendab, aeglustab jne).

  • ease – animatsioon esimesel poolel kiirendab, teisel poolel aeglustab. Tippkiirus on animatsiooni keskel.
  • ease-in – animatsioon kiirendab alguses, kuid lõpetab ühtlase kiirusega.
  • ease-out – animatsioon on ühtlase kiirusega, kuid lõpus animatsioon aelgustub.
  • linear – animatsioon on pidevalt ühes tempos. Ei kiirenda ega aeglusta mingis animatsiooni osas.
  • cubic-bezier(x1, y1, x2, y2) – sellega saab väga täpselt ära määrata, kus animatsioon kiirendab või aeglustab. Täpsemalt võid selle funktsiooni kohta leida siit, siit ja siit.

Elemendile saab ka väga lühidalt ja kiirelt animatsiooni lisada. Selleks kasutatakse CSSi animation omadust, mille väärtusteks saab panna kõikide animatsiooni omaduste väärtused.

Kaks väärtust on ka animation elemendile kohustuslikud. Need väärtused on omaduste animation-name ja animation-duration väärtused.

Ülejäänutel omadustel kasutatakse vaikimisi väärtusi.

Erinevad väärtused eraldatakse üksteisest tühikutega.

Kui keegi teab head sünonüümi väärtuse kohta, siis võiks seda mulle öelda 🙂 .

CSSi animatsioon

CSSi üleminekud

Üleminekuid (transitions) kasutatakse tihti hiirega seotud pseudoklassidega.

Näiteks kui sa lähed hiirega minu blogis ükskõik, mis lingi peale, siis see muudab värvi. Jah, väikene, aga tähtis asi.

CSSi üleminekud (nagu ka animatsioonid) on väga hea jõudlusega, kuid (animatsioonilises) veebiarendus tihti enamat nendega midagi ei tehta, sest CSS ei ole eriti võimeline muutma teisi, mitte lapselemente.

Erinevalt animatsioonist lisatakse ülemineku omadus(ed) koheselt elemendile. Et üleminek toimiks kooskõlaliselt, siis lisatakse ülemineku omadus(ed) ka elemendi pseudoklassile.

element{
  css_omadus: css_väärtus;
  transition-duration: Xs | Xms;
  transition-delay: Xs | Xms;
  transition-property: none | all | property;
  transition-timing-function: ease | ease-in | ease-out | linear | cubic-bezier(x1, y1, x2, y2);
  transition: ülemiste_omaduste_väärtused;
}

element:pseudo{
  css_omadus: css_uus_väärtus;
  transition-duration: Xs | Xms;
  transition-delay: Xs | Xms;
  transition-property: none | all | property;
  transition-timing-function: ease | ease-in | ease-out | linear | cubic-bezier(x1, y1, x2, y2);
  transition: ülemiste_omaduste_väärtused;
}

Üleminek iseenesest on lihtne – kui elemendi pseudoklass on tõene (näiteks hiir on lingi peal; :hover pseudoklass), siis muudetakse elemendi omadusi sujuvalt (näiteks antakse uus värv; kasutatakse pseudoklassi omadusi).

Kuna üleminekutel on enamus omadustest põhimõtteliselt samad, mis animatsioonil (erinevad ainult nime poolest), siis ma kattuvaid omadusi enam välja ei too.

transition-property: none | all | property – paneb paika, mis omadusi muudetakse.

  • none – ei muudeta ühtegi omadust.
  • all – kõik omadused muudetakse. Vaikimisi väärtus.
  • property – valitud (välja kirjutatud) omadused muudetakse sujuvalt. Erinevad omadused eralda tühikuga.

Nagu ka animatsiooni, nii saab ka üleminekut lisada ühe reaga. Selleks kasutatakse transition omadust, mille väärtusteks saavad olla teised üleminekuga seotud omaduste väärtused. Kohustuslikuks võib pidada transition-duration väärtust.

CSSi üleminekud

CSS animatsioonilises veebiarenduses

CSSi animatsiooni ei ole soovituslik kasutada animatsioonilises veebiarenduses, sest puhta JavaScripti animatsioon on sellest parem.

CSS probleemid on:

  • Stiilifailid koos animatsioonidega võivad muutuda raskesti ohjeldavaks koodiks.
  • CSSi animatsioonidel ei ole eirilist ajastus kontrolli võrreldes JSiga.
  • Päris maailma jäljendavaid, füüsikale põhinevaid animatsioone on keeruline CSSis imiteerida
  • Vanemad brauserid ei toeta CSSi animatsioone

Allikas: Web Animation using JavaScript

Kui tegemist on veebilehega, kus animatsioonid on lihtsamad ja neid ei ole palju, siis soovitaksin ma siiski kasutada CSSi animeerimiseks, sest JS kasutamine ei anna erilist midagi juurde peale brauseri toetuse.

Teistel juhtudel on siiski JavaScript soovituslik.

CSS aga on väga kasulik just üleminekutel ning sellega on ka CSS animatsioonilisse veebiarendusse jõudnud.

 

Kas tekkis mõtteid või küsimusi? Kui jah, siis anna nendest julgelt teada kommentaarides 🙂 !

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *