Overgangen in CSS, ofwel transitions, worden veelal gebruikt om soepele animatie-effecten te creëren wanneer de stijl van een element wordt gewijzigd.
Onderstaand is een eenvoudig voorbeeld van hoe je een overgang kunt implementeren:
```
/* Eerst specificeer je de initiële stand van het element */
div {
width: 100px;
height: 100px;
background: red;
/* Vervolgens definiëren we wat er moet gebeuren wanneer we bijvoorbeeld met de muis over het element gaan (hover) */
div:hover {
width: 200px;
}
```
In dit voorbeeld zal de breedte van de div geleidelijk veranderen van 100px naar 200px binnen 2 seconden wanneer er met de muis over wordt gegaan.
Je kunt ook meerdere eigenschappen tegelijk veranderen. Dit doe je door de eigenschappen te scheiden met een komma. Bijvoorbeeld:
```
transition: width 2s, height 2s;
```
En je kunt verschillende tijden voor verschillende eigenschappen instellen:
```
transition: width 2s, height 4s;
```
Met de `transition-delay` eigenschap kun je ook een vertraging instellen voordat de overgang begint:
```
transition-delay: 1s;
```
Je kunt ook de `transition` shorthand gebruiken om alle waarden in één lijn te definiëren:
```
transition: width 2s ease-in-out 1s;
```
In dit voorbeeld wordt de `ease-in-out` waarde definieert de “timing functie” voor de overgang, of hoe de tussenliggende eigenschapswaarden worden berekend. `ease-in-out` betekent dat de overgang langzaam begint, dan versnelt, en dan weer vertraagt aan het einde.
