CSS transition gebruiken: duur, timing en vertraging

Met CSS3 kwam een reeks nieuwe mogelijkheden om mooie effecten mee te bouwen, en de transition-property is een van de nuttigste.

De transition-property is een CSS3-module. Je gebruikt hem om een verandering op een HTML-tag of een class vloeiend te laten verlopen, met een eenvoudige schrijfwijze:

css

transition: property duration timing-function delay;

Met transitions in CSS3 breng je een beetje animatie in een site zonder ook maar één regel JavaScript. Voordat we beginnen: ik heb een CSS-tutorial geschreven waarin deze property al voorbijkomt:
Tutorial – een kaart bouwen in CSS

De property

Om te beginnen: een transition werkt pas als de property waarop hij van toepassing is, ook echt is gezet. In ons voorbeeld leggen we een transition op een background-color. De losse property schrijf je zo:

css

transition-property: background-color;

De transition

Staat de property eenmaal vast, dan moet je een begin- en een eindwaarde toekennen. In ons voorbeeld is er dus een startkleur, en een eindwaarde die bij een andere toestand hoort.
Hier zetten we de transition op background-color, daarna de beginwaarde van background-color op de div #element, en vervolgens de eindwaarde voor het moment dat de gebruiker over het element beweegt, met #element:hover:

css

#element {
    transition-property:background-color;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

De duur van de animatie

Nu de property met zijn begin- en eindwaarde vastligt, moeten we nog de duur van de transition instellen. Dat doe je met een tijd in seconden of milliseconden, zoals hieronder:

css

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

De div #element verandert dus van background-color over een duur van 200 milliseconden (0,2 seconde)

De property transition-timing-function

De code hierboven volstaat voor een transition, maar je kunt er transition-timing-function naast zetten. Met die property stuur je het verloop van de transition. Standaard staat een transition op de curve ease. Je kunt ook een van de andere ingebouwde verlopen kiezen, of met een bézier-curve je eigen verloop maken.

css

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

transition-timing-function: cubic-bezier(0.1, 0.5, 1.0, 0.1);

Zo ziet dat er in ons voorbeeld uit:

css

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

De transition uitstellen

Net als bij de duur kun je met de property transition-delay het begin van het effect uitstellen.

css

transition-delay: 1s;

css

#element {
    transition-property:background-color;
    transition-duration: 0.2s;
    transition-timing-function:ease-in-out;
    transition-delay: 1s;
    background-color:red;
}
#element:hover {
    background-color:blue;
}

···

CSS