CSS3 on ollut olemassa jo “jonkin aikaa” (esiteltiin ensi kertaa 9 vuotta sitten). Kaikesta huolimatta, CSS3:sta on ollut mahdollista käyttää yleisesti vain noin kahden vuoden ajan.

CSS3-transitiot esiteltiin käytännössä loppuvuodesta 2007 Safarin toimesta. Tuohon aikaan, niihin viitattiin termillä “CSS Animations”, mutta terminologia muuttui Safarin esitellessä omat selainkohtaiset ominaisuutensa, joita nykyään kutsutaan CSS-animaatioiksi.

Olen jakanut tämän aiheen kahteen artikkeliin. Ensimmäisessä artikkelissa käsittelen CSS3 Transitioita yleisesti. Lisäksi esittelen perustason käyttötapauksia muutamien CSS-arvojen avulla, joita voi hyödyntää CSS3-transitioita ja -transformaatioita luotaessa.

Tämä artikkeli sisältää myös viittauksia erinomaisiin CSS3-artikkeleihin. Joten artikkelin luettuasi, voit niiden avulla päivittää ja parantaa tietouttasi CSS3-transitioista.

Kuten jo totesin, aihe on jaettu kahdeksi artikkeliksi. Ensimmäisen osan nimi on “CSS3 Transitiot – olemmeko jo perillä?”, tarjoten yleisen katselmuksen CSS3-transitioiden tämänhetkiseen tilaan. Toisen osan nimi on “CSS3 Transitions – ongelmatilanteet ja ratkaisut”, joka pureutuu syvemmälle transitioihin ja niiden eroihin eri selainten välillä.

Ensimmäinen artikkeli rakentuu seuraavista osista:

• Kuinka päästä alkuun – mitä sinulta täytyy löytyä
• Perusteiden perusteet – mitä sinun on hyvä tietää transitioista
• Perusteet – mitä sinun täytyy tietää transitioista (demo-osio)
• Johtopäätökset – eli olemmeko jo perillä vai emme?
• Ulkoiset viittaukset – missä sinun kannattaa vierailla artikkelin luettuasi

Kuinka päästä alkuun

Alkuun päästäksesi tarvitset ainakin yhden selaimen, joka tukee CSS3-transitioita:

• Apple Safari (tuettuna Safari 3.1:sta ja iPhone OS 2.0:sta lähtien)
• Google Chrome
• Mozilla Firefox 3.7 alpha (tunnetaan myös Minefield:ina)
• Opera 10.5x (tuettuna myös Opera Mobile 10 beta 2)

Entä Internet Explorer?

Tällä hetkellä on ilmoitettu, että edes Internet Explorer 9 ei tule tukemaan CSS3-transitioita. Paras tuki Internet Explorerin transitioille ja transformaatioille voidaan luoda hyödyntämällä Matrix Filteria.

Lisäksi suosittelen lukemaan artikkelin Cross-Browser Animated CSS Transforms — Even in IE, jonka on kirjoittanut Zoltan “Du Lac” Hawryluk. Hän on myös cssSandpaperin luoja.

Perusteiden perusteet

Ikävä kyllä CSS3-transitioiden luomiseksi ei ole olemassa vain yhtä sääntöä. Itse asiassa, jokaisella selaimella on oma selainkohtainen tapansa kirjoittaa sääntöjä. Onneksi syötettävien arvojen syntaksi on eri selainten välillä keskenään samanlainen.

Mihin ominaisuuksiin transitiot vaikuttavat?

Valtaosa ominaisuuksista tukevat transitioita enkä lähde listaamaan niitä ykistellen. Selainten välillä on kuitenkin joitain eroja ja selkein niistä on tällä hetkellä se, että Firefox 3.7a ei tue ollenkaan transformaatioiden transitiointia.

Arvot transitioiden luomiseksi

Transitiot voidaan määritellä maksimissaan neljän eri arvon avulla:

Lyhyt muoto:

-webkit-transition: property_name duration timing_function delay;
-moz-transition: property_name duration timing_function delay;
-o-transition: property_name duration timing_function delay;
transition: property_name duration timing_function delay;

Voit myös määritellä jokaisen arvon yksityiskohtaisesti:

(Kohde)ominaisuus:

-webkit-transition-property: property_name;
-moz-transition-property: property_name;
-o-transition-property: property_name;
transition-property: property_name;

Kesto:

-webkit-transition-duration: duration;
-moz-transition-duration: duration;
-o-transition-duration: duration;
transition-duration: duration;

Kesto (kuten viivekin) voidaan syöttää joko sekunteina (esim. 0.5s) tai millisekunteina (esim. 500ms). On kuitenkin tärkeää huomata, että ilman määrettä transitio ei toimi laisinkaan.

(Liikkeen) ajoitus-funktio:

-webkit-transition-timing-function: timing_function;
-moz-transition-timing-function: timing_function;
-o-transition-timing-function: timing_function;
transition-timing-function: timing_function;

Käytössä olevat ajoitus-funktiot:

• cubic-bezier(cp1_x, cp1_y, cp2_x, cp2_y)
• ease – sama kuin cubic-bezier(0.25, 0.1, 0.25, 1.0).
• linear – sama kuin cubic-bezier(0.0, 0.0, 1.0, 1.0).
• ease-in – sama kuin cubic-bezier(0.42, 0, 1.0, 1.0).
• ease-out – sama kuin cubic-bezier(0, 0, 0.58, 1.0).
• ease-in-out – sama kuin cubic-bezier(0.42, 0, 0.58, 1.0).

Viive:

-webkit-transition-delay: delay;
-moz-transition-delay: delay;
-o-transition-delay: delay;
-transition-delay: delay;

Viive (kuten kesto) voidaan syöttää joko sekunteina (esim. 0.5s) tai millisekunteina (esim. 500ms).

Yleisesti ottaen transitiot kannattaa määritellä oletustason selektorille, ilman pseudo-luokkia. Tämän ansiosta transitio tapahtuu molempiin suuntiin, esimerkiksi vietäessä kursori elementin päälle ja pois elementin päältä.

Muista myös, että joudut syöttämään jokaisen ominaisuuden neljästi saavuttaaksesi kattavan selaintuen. Siksi on melkein aina parasta käyttää lyhyttä muotoa pitääksesi CSS-koodin siistinä.

Perusteet

Tässä vaiheessa on hyvä demonstroida muutamia transitioita. Sinun tulee joko viedä kursori elementin päälle tai klikata elementin alla olevaa painiketta, jotta transitiot toimivat.

Kaikki koodiesimerkit on kirjoitettu jättäen selainkohtaiset määritykset pois tilan säästämiseksi.

Perus-transitio: Ulottuvuudet ja skaalaaminen

Aloitan esimerkillä yksinkertaisimmasta transitiosta. Samalla tässä tulee demotuksi, mitä eroa on perusominaisuuksilla width+height sekä scale-transformaatiolla.

#widthHeight {transition:all 500ms;}
#widthHeight:hover {width:200px; height:200px; line-height:200px;}
#scale {transition:all 500ms;}
#scale:hover {transform:scale(2.0, 2.0);}

Kuten huomaat, leveys ja korkeus -arvot kasvattavat elementtiä normaalisti, mutta skaalaus vaikuttaa samoin kuin, jos elementti olisi suhteellisesti positioitu. Scale-transformaatiossa origo on keskellä, kun taas leveyttä ja korkeutta säädettäessä origo on vasemmassa yläkulmassa.

Transitio ajoitus-funktioilla

Alla on kaksi lohkoa, jotka pyörivät; ensimmäinen pyörii hyödyntäen linear ajoitus-funktiota käyttäen ja toinen käyttää ease ajoitus-funktiota.

#rotateLinear {position:relative; clear:both; left:0px; transition:all 2500ms linear;}
#rotateEasing {position:relative; clear:both; left:0px; transition:all 2500ms ease;}
#rotateLinear:target {left:200px; transform:rotate(360deg);}
#rotateEasing:target {left:200px; transform:rotate(360deg);}

Kuten luultavasti huomasit, elementtien liike oli keskenään erilaista, mutta itse transitio päättyy samaan aikaan (2500ms jälkeen).

Transitio viiveellä

Viiveestä on joskus hyötyä. Ja viiveen käyttöönottaminen transitioissa on vaivatonta:

#bgColorDelay {background-color:#12142B; transition:background-color 500ms linear 800ms;}
#bgColorDelay:hover {background-color:#336699;}

Peräkkäiset transitiot

Useita transitioita voidaan ajaa myös peräkkäin. Tälle ei ole olemassa mitään oletusarvoa, mutta “ketju” voidaan saada aikaiseksi hyödyntäen viivettä:

#widthHeightOpacity {transition:width 500ms, height 500ms linear 500ms, opacity 500ms linear 1000ms;}
#widthHeightOpacity:hover {width:200px; height:200px; opacity:0.1;}

Tässä on kuitenkin yksi miinus: transitio esitetään samassa järjestyksessä riippumatta siitä viedäänkö kursori elementin päälle vai pois sen päältä. Useimmissa tapauksissa, siinä ei ole mitään järkeä. Siksipä meidän tulee määritellä transitiot (aikaisempiin esimerkkeihin nähden) käänteisessä järjestyksessä:

#widthHeightOpacity {transition:width 500ms 1000ms, height 500ms linear 500ms, opacity 500ms linear;}
#widthHeightOpacity:hover {width:200px; height:200px; opacity:0.1; transition:width 500ms, height 500ms linear 500ms, opacity 500ms linear 1000ms;}

Muita transitioita?

Mahdollisesti on asioita, joita en tässä vaiheessa ymmärrä mainita. Mutta esimerkkien pääpaino on osoittaa kuinka yksinkertaista transitioiden käyttöönottaminen on (vaikka ne vaativatkin hieman lisätyötä kattavan selaintuen saavuttamiseksi).

Johtopäätökset

Olemmeko jo perillä? Kyllä, olemme ainakin yli puolen matkan. Transitiot ovat yleisesti ottaen todella tyylikkäitä, kunhan niitä käyttää oikeissa tilanteissa.

Olen kuitenkin henkilökohtaisesti hieman epäileväinen CSS3-transitioiden suhteen: tässä vaiheessa niihin ei voi täysin luottaa ja lisäksi ne vaativat läpikohtaista selaintestaamista. Tulen käsittelemään näitä ongelmakohtia seuraavassa osassa. Lisäksi tulen vertailemaan CSS3-transitioita Javascript-kirjastojen (tässä tapauksessa jQuery) tarjoamien animaatioiden välillä.

Jos kuitenkin olet tekemisissä alustan kanssa, joka hyödyntää puhtaasti WebKit:iä (kuten iPhone tai Adobe AIR) niin älä jää ihmettelemään, vaan ota kaikki ilo irti sekä CSS3-transitioista ja Webkit-animaatioista.

Ulkoiset viittaukset

Alla on listattuna hyviä viitteitä eri resursseihin, joita sekä selainvalmistajat että yksityishenkilöt ovat tuottaneet. Suosittelen ehdottomasti lukemaan ne.

• Safari CSS Visual Effect Guide: Transitions
• Mozilla CSS transitions – MDC
• Opera: CSS3 Transitions support in Opera Presto 2.3

• CSS3.info
• CSS3, Please! The Cross-Browser CSS3 Rule Generator
• CSS Fundamentals: CSS 3 Transitions | NetTuts+
• CSS Transitions 101 | Webdesigner Depot
• Going Nuts with CSS Transitions | 24 ways
• Safari CSS Visual Effect Guide: Animations

Kommentteja?

Kommentteja artikkelista otetaan mielellään vastaan. Lisäksi, jos sinulla on lähettää hyviä viitteitä CSS3-transitioita käsitteleviin artikkeleihin, niin näistä on varmasti suurta apua minulle ja lukijoille.