De Juiste Overgangseigenschappen Kiezen

Elke CSS-eigenschap kan worden opgegeven als waarde voor de eigenschap transition-property. Dit betekent dat een overgangseffect op elke eigenschap kan worden toegepast.

transition-property: ... /* any property */

Enkele veelgebruikte eigenschappen die worden getransitioneerd. De eigenschappen transition-duration, transition-timing-function en transition-delay blijven altijd gelijk. Alle overgangen reageren op hover van de cursor.

Meerdere overgangseigenschappen

We kunnen ook de waarde all gebruiken voor de eigenschap transition-property, wat betekent dat alle eigenschappen worden getransitioneerd.

transition-property: all;

In het volgende voorbeeld willen we de overgang van de eigenschappen background-color, color, font-weight en font-size laten verlopen. Bekijk het index.css-bestand:

Ook als we een overgang aan meerdere eigenschappen willen toevoegen, maar niet aan allemaal, kunnen we deze als waarde voor de eigenschap transition-property instellen, gescheiden door spaties. Bijvoorbeeld:

transition-property: color border height;

Dit betekent dat de overgang wordt toegepast op de eigenschappen color, border en height.