CSS3 võimaldab ka animeerimist. See tähendab, et mingite veebilehe elementide omadusi saab mingite kindlate reeglite järgi teatud ajavahemiku jooksul muuta. Nii saab luua näiteks lihtsamaid bännereid.

Animatsioone võib CSS abil luua kaht moodi:

• lastes mingite omaduste väärtuseid muutuda mingi aja jooksul – siirded (transition), mis on sobilik lühikeste animatsioonide, näiteks kasutajaliidese efektide loomiseks;
• kasutades võtmekaadreid, pikemate ja/või tsükliliselt korduvate animatsioonide loomiseks.

Siire (transition)

Ühe võimalusena saab luua sujuvaid üleminekuid muudetavate omaduste erinevate väärtuste vahel. Nii saab luua lausa animatsioone.

Ülemineku (transition) jaoks määratakse kasutatav aeg ja kiirendusfunktsioon (ease).

Omadus, mille siire määratakse

Määramaks omadust, mille ülemineku muutumist mõjutatakse, on omadus transition-property.

Seda omadust saab kasutada väga paljude omaduste puhul alates taustavärvist lõpetades mõõtmete, transformatsioonide jms.

Kui soovitakse ülemineku kiirust määrata kõigile võimalikele omadustele, siis kasutatakse omadusele viitamiseks sõna all (kõik).

Korraga võib määrata ka mitu omadust, siis tuleb need lihtsalt komadega eraldada.

Näiteks:

div {
  transition-property: width, background-color;
}

Omadused, mida saab transition omadusega kasutada kasutada ehk animeerida on loetletud aadressil: http://www.w3schools.com/cssref/css_animatable.asp

Siirde kestus ja viivitus

Määramaks, kui kaua võtab määratud omaduse muutumine aega, kasutatakse omadust transition-duration, mille väärtuseks on aeg sekundites (mõõtühikuna lisatakse s).

Näiteks:

div {
  transition-duration: 3s;
}

Üleminek ei pea toimuma kohe, võib määrata ka viivituse enne alustamist, selleks on omadus transition-delay, mille väärtuseks on aeg sekundites (mõõtühikuna lisatakse s).

Näiteks:

div {
  transition-delay: 3s;
}

Siirde kiirendusfunktsioon

Üleminek ei pea toimuma ühtlase kiirusega, saab kasutada omadust transition-timing-function, millel on järgmised võimalikud väärtused:

• ease – (vaikeväärtus) üleminek algab aeglaselt, seejärel kiireneb ja lõppeb taas aeglaselt (vastab väärtusele cubic-bezier(0.25,0.1,0.25,1));
• linear – ühtlane kiirus (vastab väärtusele cubic-bezier(0,0,1,1));
• ease-in – aeglane algus, kiirenev (vastab väärtusele cubic-bezier(0.42,0,1,1));
• ease-out – aeglustuv (vastab väärtusele cubic-bezier(0,0,0.58,1));
• ease-in-out – alguses kiirenev, lõpus aeglustuv (vastab väärtusele cubicbezier(0.42,0,0.58,1));
• cubic-bezier(n,n,n,n) – kohandatud kiirusega, võimalikud väärtused vahemikus 0 … 1.

Näiteks:

div {
  transition-timing-function: ease-in-out;
}

Siirde määramine lühendatult, kasutamine

Neid nelja omadust võib kompaktselt koos kasutada, selleks on omadus transition, mille väärtuseks kirjutatakse tühikutega eraldatuna eelnevalt kirjeldatud omaduste väärtused järgmises järjekorras:

transition: mõjutatav_omadus aeg kiirendus viivitus_enne_muudatust

Korraga saab määrata mitut üleminekut, selleks tuleb need komadega eraldatult kirja panna.

Näiteks:

transition: background-color 4s ease-in-out 0s, width 2s linear 1s;

NB! Kuna tegemist on üleminekuga kahe väärtuse vahel, siis on vaja mingisugust käivitumist, näiteks :focus või :hover sündmus (pseudoklass).

Näiteks:

#moonduvpilt:hover {
  transform-origin: 50% 50%;
  transfom: scale(.5) rotate(45deg) skew(30deg 0deg);
}

Võtmekaadrid

Animatsiooni loomiseks tuleb kõigepealt luua võtmekaadrid, mis määravad muutuvad omadused ja muutuste suurused ning seejärel seotakse need võtmekaadrid mingi veebilehe elemendiga.

Omadused, mida saab võtmekaadrites kasutada ehk animeerida on loetletud aadressil:
http://www.w3schools.com/cssref/css_animatable.asp

NB! Kuna kõik veebilehitsejad veel täielikult ei toeta animatsiooni, siis tuleb kasutada ka eesliiteid (näiteks Mozilla Firefox jaoks –moz-) ja seda nii võtmekaadrite defineerimiseks kui ka animatsiooni rakendamiseks!

Võtmekaadrid (keyframes) on animatsiooni töövahendid, millede abil fikseeritakse muudetavad omadused ja muutuste suurus erinevatel ajahetkedel.

Võtmekaadrite määramiseks kasutatakse @keyframes reeglit kujul:

@keyframes animatsiooni_nimi {
võtmekaadrid
}

Võtmekaadrid seejuures on omaette CSS stiilid, kus selektoriks on võtmekaader (animatsiooni positsioon) ning sellele järgnevad muudetavad omadused ja nende väärtused antud hetkel. Võtmekaadri selektoriteks võivad olla väärtused 0% kuni 100% või siis from (sama mis 0%) ja to (sama mis 100%).

NB! Võtmekaadrite määramisel võib kasutada protsentuaalseid väärtuseid sajandiku täpsusega (kaks kohta pärast koma).

Näiteks loome võtmekaadrid, mis muudavad elemendi taustavärvi alustades punasest, minnes üle roheliseks ja lõpetades sinisega:

@keyframes taustaRGB {
  0% {background-color: red;}
  50% {background-color: green;}
  100% {background-color: blue;}
}

Korraga võib muutuda mitu erinevat omadust, need tuleb võtmekaadrites CSS-ile tavapärasel moel semikoolonitega eraldatult kirja panna.

Näiteks loome võtmekaadrid, mis lisaks taustavärvile liigutavad elementi tema esialgsest asukohast alguses 200 pikslit paremale, siis 200 pikslit alla, siis 200 pikslit vasakule ja lõpuks esialgsele kohale tagasi:

@keyframes taustaRGB_liigu_ruudul {
  0% {background-color: red; transform: translate(0px,0px);}
  25% {background-color: yellow; transform: translate(200px,0px);}
  50% {background-color: green; transform: translate(200px,200px);}
  75% {background-color: cyan; transform: translate(0px,200px);}
  100% {background-color: blue; transform: translate(0px,0px);}
}

Animatsioon

Määratud võtmekaadrid seotakse veebilehe elemendiga kasutades järgnevalt kirjeldatavaid omadusi.

NB! Selline lähenemine võimaldab ühte ja sama komplekti võtmekaadreid kasutada erinevatel veebilehe elementidel (ka erinevate seadetega).

Võtmekaadrite sidumine elemendiga ja animatsiooni kestus

Kasutatavad võtmekaadrid ehk võtmekaadritel määratud animatsiooni nimi määratakse omadusega animation-name. Selle väärtuseks on soovitud võtmekaadrite juures määratud nimetus.

Näiteks:

div {
  animation-name: panoraami;
}

Animatsiooni kestuse määrab omadus animation-duration. Selle omaduse väärtuseks on arv sekundites (mõõtühikuna lisatakse s), vaikimisi on väärtuseks 0s.

Näiteks:

div {
  animation-duration: 4s;
}

Animatsiooni kiirendusfunktsioon

Sarnaselt transformatsioonidele, saab määrata, kas on tegemist ühtlase kiirusega toimiva animatsiooniga või toimub ka kiirenemine, aeglustumine. Selleks on omadus animation-timing-function, millel on järgmised võimalikud väärtused:

• ease – (vaikeväärtus) üleminek algab aeglaselt, seejärel kiireneb ja lõppeb taas aeglaselt (vastab väärtusele cubic-bezier(0.25,0.1,0.25,1));
• linear – ühtlane kiirus (vastab väärtusele cubic-bezier(0,0,1,1));
• ease-in – aeglane algus, kiirenev (vastab väärtusele cubic-bezier(0.42,0,1,1));
• ease-out – aeglustuv (vastab väärtusele cubic-bezier(0,0,0.58,1));
• ease-in-out – alguses kiirenev, lõpus aeglustuv ((vastab väärtusele cubicbezier(0.42,0,0.58,1));
• cubic-bezier(n,n,n,n) – kohandatud kiirusega, võimalikud väärtused vahemikus 0 … 1.

Näiteks:

div {
  animation-timing-function: ease-in-out;
}

Viivitus enne animatsiooni algust

Määramaks viivitust enne animatsiooni käivitumist (muidu käivitub kohe veebilehe laadimise järel), kasutatakse omadust animation-delay, mille väärtuseks on arv sekundites (mõõtühikuna lisatakse s), vaikimisi on väärtuseks 0s.

Näiteks:

div {
  animation-delay: 5s;
}

Viivitust saab kasutada näiteks mitmele elemendile identse animatsiooni rakendamisel, kui tahetakse, et elementide animatsioonid kulgeksid üksteise suhtes väikeses ajalises nihkes.

Animatsiooni kordamine

Animatsiooni võib panna korduma, selleks on omadus animation-iteration-count, millel on järgmised võimalikud väärtused:

• täisarv – määra, mitu korda animatsiooni esitatakse, vaikeväärtuseks 1;
• infinite – animatsiooni korratakse lõpmatult.

Näiteks:

div {
  animation-iteration-count: 6;
}

Animatsiooni kulgemise suund

Animatsiooni võib esitada otsast lõpuni, edasi tagasi või näiteks tagurpidi. Suuna määramiseks kasutatakse omadust animation-direction, millel on järgmised võimalikud väärtused:

• normal – animatsioon esitatakse tavapäraselt algusest lõpuni (vaikeväärtus);
• reverse – animatsioon esitatakse tagurpidi lõpust alguseni;
• alternate – animatsiooni esitatakse vaheldumisi õigetpidi ja tagurpidi ehk paaritutel kordadel õigetpidi;
• alternate-reverse – animatsiooni esitatakse vaheldumisi kuid alustatakse tagurpidi esitamisest ehk paariarvulistel kordadel õigetpidi.

Näiteks:

div {
  animation-direction: alternate;
}

Elemendi omadused enne ja pärast animatsiooni

Kui animatsioon lõppeb, siis vaikimisi taastub animatsiooni eelne olukord ehk kõik elemendid liiguvad tagasi algsetele kohtadele, taastuvad esialgsed värvid jne. Määramaks, mis toimub enne animatsiooni käivitumist või pärast selle lõppu, on omadus animation-fill-mode, millel on järgmised võimalikud väärtused:

• none – animatsioon ei määra veebilehe elemendile mingeid omadusi enne ega pärast esitust (vaikeväärtus);
• forwards – pärast animatsiooni lõppemist rakendatakse veebilehe elemendile need omadused, millega animatsioon lõppes (viimase võtmekaadri seaded);
• backwards – veebilehe elemendile rakendatakse juba enne animatsiooni algust (viivituse (delay) ajal) need omadused, millega algab esimene animatsiooni kordus;
• both – veebilehe elemendile rakendatakse enne ja pärast animatsiooni omadused, mis määratakse animatsiooni poolt vastavalt alustades ja lõpetades.

Näiteks:

div {
  animation-fill-mode: both;
}

Animatsiooni olek

Animatsiooni saab mängimise ajal ka peatada (paus), selleks kasutatakse omadust animation-play-state, mille väärtusteks on:

• running – animatsiooni esitatakse (vaikeväärtus);
• paused – animatsiooni esitus on peatatud.

NB! Omaduse animation-play-state väärtuse muutmiseks on vaja mingit sündmust (näiteks :hover pseudoklass) ning sellele reageerimist (näiteks JavaScript’i abil).

Näiteks:

img:hover {
  animation-play-state: paused;
}

Animatsiooni määramine ühe omadusena

Animatsiooni võib kirja panna ka lühidalt, ühe omadusega animation, mille väärtuseks tuleb tühikutega eraldatult loetleda eelnevalt kirjeldatud omaduste väärtused:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Näiteks:

div {
  animation: edasi 3s ease-in-out 2s 4 alternate;
}

NB! Kui mõne omaduse väärtust kirja ei panda, siis kasutatakse selle vaikeväärtust (eelmisel näitel fill-mode ja play-state).

Animatsiooni näide

Näiteks paigutame veebilehele pildi kõrgusega 200 pikslit ja laiusega 1200 pikslit, paigutame selle ühe elemendi <div> sisse, mille laiuseks määrame 600 pikslit (pool pildi laiust) ning peidame üle serva ulatuva sisu (et pildist vaid pool paistaks). Paneme pildi edasi tagasi liikuma (600 pikslit vasakule), et kõike näha, lõpetame 5 korra järel (pildist jääb naha pool, mis algselt oli varjatud). Kui hiirega pildile liikuda (:hover) animatsioon peatub.

Kood:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
  /*div jaoks*/
  .ekraan {
    width: 600px;
    height:200px;
    overflow:hidden;
  }
  /*pildi jaoks*/
  .panoraam {
    animation: edasi 5s ease-in-out 2s 5 alternate forwards running;
  }
  .panoraam:hover {
    animation-play-state: paused;
  }
  /*animatsiooni võtmekaadrid*/
  @keyframes edasi {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(-600px,0px);}
  }
  
  
  </style>
  
</head>
<body>
  <div class="ekraan">
    <img src="panoraampilt.jpg" alt="panoraam" class="panoraam">
  </div>
</body>
</html>