Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer De Juiste Overgangseigenschappen Kiezen | Vloeiende Overgangen Maken in CSS
Geavanceerde CSS-Technieken

bookDe 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy

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.

question mark

Wat bepaalt de eigenschap transition-property?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 2

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 2.04

bookDe 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy

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.

question mark

Wat bepaalt de eigenschap transition-property?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 2
some-alt