Animointi CSS:n avulla

CSS:llä voidaan toteuttaa myös yksinkertaisia animaatioita. Tutkitaan asiaa esimerkin avulla. Tehdään ensin taustaväriä muuttava laatikko jossa teksti ALE. Alla CSS osuus:

<style>
#laatikko {
width: 100px;
height: 50px;
background-color: red;
-webkit-animation-name: varin_vaihto; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: varin_vaihto;
animation-duration: 4s;
}
@-webkit-keyframes varin_vaihto {
0% {background-color: red;}
25% {background-color: black;}
50% {background-color: blue;}
75% {background-color: green;}
100% {background-color: red;}
}
@keyframes varin_vaihto { <br>
0% {background-color: red;}
25% {background-color: black;}
50% {background-color: blue;}
75% {background-color: green;}
100% {background-color: red;}
}
</style>

Laatikko -osassa on ensin määritetty laatikon koko, sitten taustaväri. Sen jälkeen animaation nimi (animation-name) ja animaation kesto (animation-duration) erikseen Chrome, Safari ja Opera selaimelle (eteen tulee -webkit-) ja muille selaimille (ilman webkit -sanaa). Sitten on kerrottu taas erikseen molemmille selainvaihtoehdoille ns. avainkehyksien ominaisuudet ja sijainnit (prosenteissa suhteessa aikaan). Esim. rivillä "25% {background-color: black;}" kerrotaan että kun animaation ajasta on kulunut 25% (tässä 1 sekunti, koska kesto oli 4s) muutetaan taustaväri mustaksi.

Sitten lisätään body -osaan seuraava koodi

<div id="laatikko"> <p style="text-align:center; color:#FFF; line-height: 50px; font-size:24px; font-weight:bold";>ALE</p> </div>

Tässä on ALE -sanan muotoilut tehty suoraan p -tagin yhteyteen style -komennolla. Ko. esimerkki näyttää selaimessa seuraavalta:

Lisätään koodiin muutama lisäominaisuus. Uusi <style> -osan koodi on:

<style>
#laatikko {
width: 100px;
height: 50px;
background-color: red;
position:relative;
-webkit-animation-name: varin_vaihto_liike; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-name: varin_vaihto_liike;
animation-duration: 4s;
animation-iteration-count: infinite;
@-webkit-keyframes varin_vaihto_liike {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:black; left:200px; top:0px;}
50% {background-color:blue; left:400px; top:0px;}
75% {background-color:green; left:200px; top:0px;}
100% {background-color:red; left:0px; top:0px;}
}
@keyframes varin_vaihto_liike {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:black; left:200px; top:0px;}
50% {background-color:blue; left:400px; top:0px;}
75% {background-color:green; left:200px; top:0px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>

Nyt animaatioon on lisätty myös liike ja jatkuva toisto. Lisätyt komennot ovat "position:relative" (sijainti suhteellinen), "animation-iteration-count: infinite;" jolla animaatio alkaa aina uudestaan alusta. infinite sanan tilalle voidaan antaa myös luku, jolloin animaatio toistetaan halutun monta kertaa, jonka jälkeen se pysähtyy. Tämän lisäksi keyframes -osaan on lisätty taustavärin lisäksi sijainnit, joissa laatikon halutaan olevan animaation eri kohdissa (left ja top määritys). Ko. animaatio näyttää selaimessa tältä.

Alla vielä muutamia lisämäärityksiä, joita animatiolle voitaisiin antaa:

animation-delay ja -webkit-animation-delay Lisää halutun viiveen animaation aloitukselle, esim. animation-delay: 2s (ja sama webkitin kanssa) lisäisi 2 sekunnin viiveen.
animation-timing-function (myös webkit) Tällä animaation saa siten että se on aluksi nopeampi ja hidastuu loppua kohden (ease) tai päinvastoin (ease-in).
rotate

Kierrä. Tämä tarvitsee kolme määritystä eri selaimille, esim:
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg); /* Standard syntax */

scale Skaalaa. Tämä tarvitsee kolme määritystä eri selaimille, esim:
-ms-transform: scale(2, 3); /* IE 9 */
-webkit-transform: scale(2, 3); /* Safari */
transform: scale(2, 3);
Ensimmäinen luku suluissa on leveys (kertaa alkuperäinen, voi olla myös esim. 0.5 (huom. piste) jolloin pienentää puoleen. Toinen luku on korkeus.
opacity Läpinäkyvyys. Arvo väliltä 0-1. Nolla on täysin läpinäkyvä. Näin esim. kuva voidaan häivyttää näkyvistä (aluksi arvo 1, lopuksi 0) tai tuoda esiin (ensin 0 sitten 1). 50% peittävyys saadaan arvolla 0.5 (huom. piste). Vanhaa IE:tä varten voidaan lisätä filter: alpha(opacity=50);, mutta yleensä riittää pelkkä opacity:0.5;

Animaatioon liittyviä komentoja on toki paljon muitakin. Voit tutkia niitä esim. w3school.com palvelusta: