Transitions

Een :hover die meteen omslaat voelt hard aan. Met een transition laat je de browser de tussenliggende waarden zelf berekenen.

transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;

Die vier schrijf je als één regel, in die volgorde:

transition: background-color 0.2s ease-in-out 0.1s;

De delay mag je weglaten.

Houd het kort

Boven de 0.3s begint een transition traag aan te voelen. Je bezoeker wacht dan op je site.

Op welke state zet je ze

.doos {
    transition: border-radius 0.2s ease-in-out;
}

.doos:hover {
    border-radius: 50%;
}

De transition staat op de state die blijft, niet op :hover.

Zet je ze op :hover, dan loopt de animatie wel bij het binnenkomen en slaat ze bij het weggaan abrupt terug.

Timing functions

Waarde	Gedrag
linear	overal even snel
ease-in	traag beginnen
ease-out	traag eindigen
ease-in-out	traag beginnen en eindigen
ease	de standaard

ease-in-out oogt het natuurlijkst voor hover-effecten.

Meerdere tegelijk

Scheid ze met komma's. Elke property krijgt zijn eigen duur, timing en delay:

.multiple {
    width: 4rem;
    aspect-ratio: 1 / 1;
    background-color: oklch(0.45 0.18 264);
    transition: transform 0.2s ease-in 0.5s,
                background-color 0.4s ease-in-out 0.2s,
                border-radius 0.2s linear;

    &:hover {
        transform: scale(1.5);
        background-color: oklch(0.55 0.17 145);
        border-radius: 40%;
    }
}

Dit voorbeeld gebruikt nesting voor de :hover.

💡 Wat je hier nog ziet staan

aspect-ratio houdt de verhouding van een element vast, hier een vierkant. transform: scale() vergroot een element zonder de rest van de pagina te verschuiven. border-radius rondt de hoeken af.

Niet alles beweegt mee

Een transition werkt alleen op properties met een tussenliggende waarde. background-color gaat van de ene kleur naar de andere, width van 4rem naar 8rem.

display heeft geen tussenwaarden, en springt dus van de éne state naar de andere.