We hebben al veel nieuwe aspecten van CSS3 hier besproken in onze wekelijkse webtip. Vandaag gaan we kijken naar animatie met CSS3. Animaties maak je doorgaans met javascript of flash, maar wist je dat met CSS3 ook snel animaties kunt maken? Met bijvoorbeeld 'rotate' (voor het draaien van iets), 'scale' (voor het groter/kleiner maken van iets), 'translate' (voor het verplaatsen van iets) enz. in combinatie met 'transition' kun je snel en simpel animaties maken.

Transition

Met de 'transition' functie binnen CSS3, kun je kiezen hoe het éne in het andere overgaat en hoe lang dat moet duren. Je hebt hierin diverse keuzes:

• default 
• ease-in 
• ease-out 
• ease-in-out 
• cubic-bezier 
• linear

Wat deze mogelijkheden precies inhouden vind je op deze pagina met voorbeelden van elke soort overgang. Deze kun je vervolgens als volgt gebruiken:

-webkit-transition: all 1s ease-in-out;

Laten we maar eens kijken naar het volgende voorbeeld:

.animeer {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    background: #FFF;
}

.animeer:hover {
    background: #000;
}

Maak je nu een element met de 'animeer'-class en je gaat daar met je muis overheen dan zul je zien dat de witte achtergrond hiervan geleidelijk overgaat naar de zwarte. Let op dat -moz- en -o- gebruikt wordt voor het functioneren in meerdere (CSS3-compatibele) browsers.

Rotate, scale, skew, translate

Natuurlijk kun je de 'transition' functie vervolgens ook gebruiken in combinatie met nog enkele nieuwe functies binnen CSS3: Rotate, scale, skew en translate. Deze zullen we hier niet allemaal gaan bespreken. Op Standardista staan ze namelijk keurig uitgelegd.

Demo

Bestudeer nu onze demo-pagina (en de bijbehorende broncode) maar eens waar we enkele voorbeelden op hebben geplaatst.