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

bookOvergangen Combineren

Alle overgangsgerelateerde eigenschappen kunnen in één regel worden gecombineerd.

transition: <property> <time> <time_function> <delay>;

Stel dat er een overgangseigenschap aan het element moet worden toegevoegd. Verwacht wordt:

  • de wijziging van de eigenschap background-color;
  • de tijdsduur is 1.2s;
  • de tijdsfunctie moet ease-in-out zijn;
  • de vertraging is 250ms.

Lange vorm

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Verkorte vorm

transition: background-color 1200ms ease-in-out 250ms;

Opmerking

Er is geen verschil in syntaxis voor de browser. We kunnen elke optie kiezen die we het prettigst vinden.

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 6

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

bookOvergangen Combineren

Veeg om het menu te tonen

Alle overgangsgerelateerde eigenschappen kunnen in één regel worden gecombineerd.

transition: <property> <time> <time_function> <delay>;

Stel dat er een overgangseigenschap aan het element moet worden toegevoegd. Verwacht wordt:

  • de wijziging van de eigenschap background-color;
  • de tijdsduur is 1.2s;
  • de tijdsfunctie moet ease-in-out zijn;
  • de vertraging is 250ms.

Lange vorm

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Verkorte vorm

transition: background-color 1200ms ease-in-out 250ms;

Opmerking

Er is geen verschil in syntaxis voor de browser. We kunnen elke optie kiezen die we het prettigst vinden.

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 6
some-alt