Op het web wordt veel gesproken over CSS 3, de opvolger van CSS 2. Niet geheel onlogisch aangezien CSS 3 veel nieuwe interessante mogelijkheden biedt. Hoewel de ondersteuning van CSS 3 door veel browsers nog beperkt is, verdiepen we ons uiteraard al volop in deze materie.
In dit blog laat ik jullie zien hoe je eenvoudig een animatie kunt maken met CSS.
Animaties op websites worden nu nog vaak met Flash of Javascript gemaakt. Flash lijkt echter z’n tijd te hebben gehad en voor eenvoudige animaties wil je vaak liever geen Javascript gebruiken. Er is een alternatief, animeren kan nu ook met CSS. De webbrowser moet dan wel ondersteuning van WebKit bieden. WebKit is een opensource webbrowser engine die veel extra mogelijkheden biedt.
Animeren met CSS is erg eenvoudig. Als voorbeeld neem ik de draaiende molen op Mijncaravanstalling.nl, een project die we onlangs gelanceerd hebben. Als je een browser hebt die WebKit ondersteunt dan zouden de wieken van de molen moet draaien. De nieuwe versies van Google Chrome en Safari ondersteunen deze techniek. Mozilla Firefox en Internet Explorer maken (helaas) nog geen gebruik van de WebKit. Als je de wieken niet ziet draaien dan raad ik je aan om Google Chrome te downloaden. Dit is in mijn ogen momenteel de beste browser die er is.
Hieronder de code die er voor zorgt dat de wieken van de molen draaien.
@-webkit-keyframes rotate {
0% { -webkit-transform: rotate(-0deg); }
50% { -webkit-transform :rotate(180deg); }
100% { -webkit-transform :rotate(360deg); }
}
#mill {
-webkit-animation-name: rotate;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
Met de @-webkit-keyframes regel bepaal je wat het effect van de animatie moet worden. De @-webkit-keyframes bevat de keyframes voor de animatie. In ons geval draaien de wieken 360 graden en hebben we drie keyframes. Een keyframe definieert de stijl die het object heeft op een bepaald moment binnen de animatie. Het @-webkit-keyframes object heeft in ons geval de naam ‘rotate’ gekregen.
We kunnen de wieken vervolgens laten draaien door de -webkit-animation toe te passen. We spreken het object ‘rotate’ aan met web-kit-animation-name. De duration bepaald logischerwijs hoe lang de animatie duurt. Met de interation-count kan je aangeven hoe vaak de animatie afgespeeld moet worden. In ons geval moeten de wieken altijd draaien en daarom zetten we deze eigenschap op infinite.
Voilà, het resultaat is een vloeiende animatie gerealiseerd met slechts 6 regels code. Eenvoudiger kan het bijna niet.
Andere mogelijkheden
Animaties werken alleen als de browser WebKit ondersteund. Er zijn echter nog veel meer interessante technieken binnen CSS 3 die geen WebKit nodig hebben. Veel gebruikte CSS 3 technieken zijn:
- Border radius
Met border radius kan je elementen van afgeronde hoeken voorzien. Een collega heeft hier al eerder over geschreven in het blog over afgeronde hoeken in alle webbrowsers. - Text shadow
Hiermee kan je teksten voorzien van een schaduw. Met box-shadow kan je overigens ook andere elementen een schaduw geven. - Opacitiy
Opacity is misschien wel één van de meest populaire functies van CSS 3. Met deze functie kan je bepaalde elementen transparant maken. - Multiple backgrounds
Elementen kunnen vanaf nu meerdere achtergronden bevatten. - @font-face
Met @font-face is het gebruik van standaard lettertypes verleden tijd. Met CSS 3 kan elk (gratis) font gebruikt worden in websites en webapplicaties. In het blog over de toekomst van webfonts heb ik hier al eerder over geschreven. Op Mijncaravanstalling.nl is gebruik gemaakt van @font-face en worden de kopjes getoond in het populaire lettertype ChunkFive.
Laat een reactie achter als je meer wilt weten over CSS 3 of andere interessante ontwikkelingen zoals HTML 5. Pronamic is een innovatief bedrijf en investeert volop in nieuwe technieken en noviteiten.