Het overgangseffect in CSS kan worden gebruikt om vloeiende overgangen tussen verschillende staten van een HTML-element mogelijk te maken. Bijvoorbeeld, in plaats dat een element onmiddellijk van kleur verandert wanneer je er met de aanwijzer overheen gaat, kan je dat geleidelijk laten gebeuren.
Hier is hoe je een eenvoudig overgangseffect kunt uitvoeren:
```
div {
width: 100px;
height: 100px;
background: red;
transition: background 2s;
}
div:hover {
background: yellow;
}
```
In dit voorbeeld hebben we een div-element met een rode achtergrond. We hebben de ‘transition’-eigenschap toegevoegd aan de div, waarbij ‘background’ het CSS-eigenschap is dat moet veranderen, en ‘2s’ de tijd is die de overgang zal duren.
Wanneer je de muisaanwijzer over de div beweegt (div:hover), zal de achtergrond van rood naar geel veranderen. Maar dankzij de overgangseigenschap, zullen deze verandering in 2 seconden plaatsvinden, wat een vloeiende verandering in plaats van een abrupte verandering geeft.
Je kunt ook meerdere eigenschappen animeren door ze te scheiden met komma’s:
```
div {
width: 100px;
height: 100px;
background: red;
border-radius: 0;
transition: background 2s, border-radius 1s;
}
div:hover {
background: yellow;
border-radius: 50%;
}
```
In dit voorbeeld zal ook de `border-radius` geleidelijk veranderen wanneer er met de muis over het element wordt bewogen. Deze overgang zal 1 seconde duren, wat betekent dat de achtergrondkleur en de border-radius op verschillende momentsnelheden zullen veranderen.
