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.
1 reactie
Inderdaad erg leuk die CSS animaties, maak er zelf ook regelmatig gebruik van. Met 3D-transforms kun je ook nog een stap verder gaan, zie dit voorbeeld:
https://code.tutsplus.com/tutorials/build-a-kickbutt-css-only-3d-slideshow–net-17442
Jammer dat de ondersteuning hiervoor nog zeer beperkt is (ook Mozilla werkt nog niet mee).