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.
index.html
index.css
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:
index.html
index.css
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
.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.04
De Juiste Overgangseigenschappen Kiezen
Veeg om het menu te tonen
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.
index.html
index.css
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:
index.html
index.css
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
.
Bedankt voor je feedback!