Soms is het noodzakelijk om animaties te maken voor wijzigingen van elementen op een webpagina, waarbij factoren zoals snelheid, vertragingstijd en duur moeten worden beheerst. In dergelijke gevallen kan de eigenschap transition worden gebruikt om deze taak uit te voeren.

Het element heeft altijd twee toestanden: initieel en finaal. Het gedrag van de overgang van het element kan worden beheerst met behulp van de volgende eigenschappen:

transition-property: 
transition-duration:  
transition-timing-function: 
transition-delay: 

• transition-property - De naam van de CSS-eigenschap die geanimeerd moet worden;
• transition-duration - De tijdsduur waarin de toestand van het element moet veranderen. Dit wordt opgegeven in seconden (s) of milliseconden (ms);
• transition-timing-function - Bepaalt de snelheidskromme van het overgangseffect. Typische waarden zijn ease, linear, ease-in, ease-out en ease-in-out;
• transition-delay - De tijdsvertraging voordat het overgangseffect begint. Dit wordt opgegeven in seconden (s) of milliseconden (ms).

Elke eigenschap wordt verder in deze cursus behandeld.

Opmerking

1 seconde = 1000 milliseconden. Dus:

• 0.1s = 100ms;
• 2.5s = 2500ms;
• 0.5s = 500ms.

Oefening

Bijvoorbeeld, we willen een transition-effect toevoegen aan de achtergrondkleur van het div-element wanneer erover wordt gehooverd. Onze taak is:

• De background-color-eigenschap wijzigen;
• De vertraging moet 0.1 seconden zijn;
• De duur van de kleurverandering moet 0.3 seconden zijn;
• Voor de timing-function verwachten we de waarde ease-in-out, wat betekent dat het langzaam begint, versnelt in het midden en aan het einde weer vertraagt.

Beweeg de cursor over het element om het resultaat te zien.

We hebben alle overgangsgerelateerde eigenschappen aan het div-element toegewezen en vervolgens bij hover alleen de decoratie ingesteld die we willen zien.