CSS keyframe animaties

Geschreven op 16 augustus door Kris

In het verleden heb ik veel animaties gemaakt. Tot voor kort had je javascript- of flash-skills nodig om te animeren. Nu CSS-animaties opkomen in Firefox en Webkit-browsers is het met CSS3 keyframes mogelijk zonder scriptkennis toffe animaties te maken. Daarmee maak je interfaces spannender, meer gebruiksvriendelijk en komen ze nog meer tot leven. Let wel, te veel van iets is nooit goed ;-).

Keyframes

In deze note beschrijf ik kort de eerste stappen van CSS-animaties. Je zult zien dat het vrij eenvoudig is, mits je over basis CSS-kennis beschikt. Er bestaan twee type animaties: animaties die afhankelijk zijn van de interactie van de gebruiker, en animaties die op een vooraf gegeven moment plaatsvinden (zonder tussenkomst van de gebruiker). We gaan nu kijken naar de laatste.

Als voorbeeld gaan we CSS3 keyframes op een los HTML-element toevoegen. Denk bijvoorbeeld aan een logo die bij het laden van de webpagina 20 pixels vanuit de Y-as naar beneden schuift.

Animatie-eigenschappen

CSS-animaties zijn nieuwe eigenschappen die je op de meeste HTML-elementen zoals een <div>, <span> of <h1> kunt toevoegen. De oudere browsers negeren de animatie-code, zorg er daarom wel voor dat je site of interface niet afhankelijk is van animaties. Om een gevoel bij de code te krijgen lopen we even kort door de code heen.

In de CSS-file begin je met het maken van een losse animatie aan de hand van een @keyframe selector. Hiermee kun je een set frames (de daadwerkelijke animatie) van begin tot eind instellen. De animatie zelf koppelen we later aan het te animeren element. Omdat de techniek nog redelijk nieuw is, en er nog geen officiële standaard is, moeten we deze selector per browsers anders aanroepen:

  • Chrome & Safari: @-webkit-keyframes
  • Firefox: @-moz-keyframes
  • Vanaf internet Explorer 9: @-ms-keyframes

Nu kunnen we de animatie opzetten. In dit voorbeeld geef ik de animatie de naam Wolf. Ook hier weer: om de animatie in alle browsers goed te laten lopen roepen we hem voor elke browser apart aan.

Onze animatie speelt af in een tijdsframe van 0 tot 100%. Deze percentages zijn handig als je meerdere animaties naast elkaar wilt laten lopen. Animatie 1 speelt dan bijvoorbeeld van 0 tot 75% en animatie 2 van 25 tot 100%. De twee animaties overlappen elkaar dan voor de middelste 50% van de tijd, maar dat terzijde. In ons tijdsframe willen we de zichtbaarheid (opacity) van ons HTML-element van 0 (onzichtbaar) tot 1 (volledig zichtbaar) laten animeren. We willen daarnaast het element ook -20px vanuit de Y-as laten zakken tot 0px, namelijk de originele positie van het logo. Het geheel leggen we vast via de volgende transform:

@-webkit-keyframes wolf {
0% { opacity: 0; -webkit-transform: translateY(-20px);}
100% { opacity: 1; -webkit-transform: translateY(0px);}
}

@-moz-keyframes wolf {
0% { opacity: 0; -webkit-transform: translateY(-20px);}
100% { opacity: 1; -webkit-transform: translateY(0px);}
}

@-ms-keyframes wolf {
0% { opacity: 0; -webkit-transform: translateY(-20px);}
100% { opacity: 1; -webkit-transform: translateY(0px);}
}

De animatie toewijzen aan een HTML-element

De animatie is gedefinieerd. Nu moeten we de animatie nog toevoegen aan het element dat moet gaan animeren. In ons geval willen we dat op het logo doen. Dit doen we eenvoudig via een CSS-statement op het HTML-element (animation-name: wolf;). Aan het element kunnen we extra CSS-statements toevoegen om bijvoorbeeld de animatie eindeloos te herhalen (animation-interation-count: infinite;). Op dezelfde manier kan je de start van de animatie vertragen en de lengte van de animatie instellen. Voor ons logo element hebben we het volgende ingesteld:

a.logo {
-webkit-animation-name: wolf;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 2;
}

In woorden: op het HTML-element a.logo zetten we de animatie wolf, we starten hem 1 seconde na het laden van de pagina, we herhalen de animatie 2 keer met elke keer een animatietijd van 1 seconde. Daarnaast geven we de animatie een easingfunctie mee, dat betekend dat de animatie aan het begin en eind wat soepeler start en stop. Vergeet niet de animatie apart te definiëren voor Internet Explorer en Firefox.

Tot slot

In deze note heb ik kort een onderdeeltje van CSS-animatie uitgelicht. Door ermee te spelen kan je zelf zien wat de kracht hiervan is. Voor ons gaan animatie een steeds groter onderdeel uitmaken van de interfaces en sites die we maken. Mocht ik je ergens mee kunnen helpen? Schrijf het hieronder in de comments.

Hieronder wat toffe links om te zien wat je allemaal kunt doen met CSS3 keyframes:

We gaan zorgvuldig om met je e-mailadres. Deze publiceren we niet en gebruiken we alleen ter verificatie van je reactie.

  • Een animatie die me enige tijd heeft gekost, bleek deze week niet te werken in Firefox 15 (deed ‘t nog wel in versie 12). Wat blijkt? Firefox 15 vereist dat je een delay van 0s ook echt definieert als ’0s’ en niet als ’0′. Hetzelfde geldt waarschijnlijk voor de property ‘duration’. Wellicht een time-saver als je een keer vastzit.

    Ps. Een delay van 0s kun je natuurlijk nog beter helemaal weglaten :)

    door Thomas