CSS 3: Transitions

Eén van de leukste nieuwe functies van CSS 3 zijn transitions. Hiermee kan je erg eenvoudig leuke effecten creëren. In de blog Animeren met CSS 3 heb ik al een voorbeeld laten zien waarbij we door middel van CSS molenwieken laten draaien.

Ik pas het transition effect echter ook vaak toe op links en andere navigatie onderdelen. Als je de website van Pronamic wel eens in een WebKit browser (Safari of Google Chrome) hebt bekeken is het je misschien wel opgevallen. Zodra je met de muiscursor over de link ‘Lees verder’ gaat zie je een lichte transition van donkergrijs naar oranje. Vroeger maakten we een dergelijke animatie met Flash, nu doen we dat met CSS.

De hover animatie

Door middel van onderstaande CSS kan je een soortgelijk effect creëren.

a.button {  
	 background-color: black;  
	 -webkit-transition-property: background-color;  
	 -webkit-transition-duration: 0.1s;  
	 -webkit-transition-timing-function: linear, linear;  
}  
  
a.button:hover  
	 background-color: orange;  
	 -webkit-transition-property: background-color;  
	 -webkit-transition-duration: 0.1s;  
	 -webkit-transition-timing-function: linear, linear;  
} 

De transition-property geeft aan op welke eigenschap welk effect uitgevoerd moet worden. In ons geval willen we de achtergrond kleur wijzigen, vandaar de eigenschap background-color. De transition-property kan meerdere waarden bevatten, zodat je meerdere effecten op één element kan toepassen. Met de transition-duration kunnen we aangeven hoe lang de animatie moet duren. In het geval van dit hover effect heb ik gekozen voor 0.1 seconden. De transition-time-function biedt vervolgens nog de mogelijkheid om het effect van de animatie aan te passen. Hier kan je onder andere kiezen uit linair, ease-in, ease-out en ease-in-out.

Zoals gezegd werkt deze animatie alleen in een WebKit browser. Door het gebruik van andere prefixes zoals -moz-transition of o-transition kan je de animatie ook in andere browsers werkend krijgen.