Der Übergangseffekt in CSS wird mit der `transition`-Eigenschaft verwendet. Diese Eigenschaft ermöglicht es Ihnen, Geschwindigkeit und Timing der Änderungen zu steuern, die am Aussehen eines Elements vorgenommen werden. Es hilft, einen sanften und graduellen Übergang zwischen verschiedenen Zuständen eines Elements zu erzeugen.
Syntax:
```css
selector {
transition:
}
```
- `
- `
- `
- `
Beispiel:
```css
div {
transition: background-color 2s ease-in-out 1s;
}
```
In diesem Beispiel ändert sich die `background-color` eines `div` über einen Zeitraum von 2 Sekunden mit einer `ease-in-out`-Geschwindigkeitskurve und beginnt nach einer Verzögerung von 1 Sekunde.
Um den Übergang zu beobachten, müssten Sie dann eine Änderung an der CSS-Eigenschaft auslösen, zum Beispiel durch :hover:
```css
div:hover {
background-color: blue;
}
```
Jetzt ändert sich, wenn Sie mit der Maus über das div fahren, die Hintergrundfarbe über 2 Sekunden hinweg von der ursprünglichen Farbe zu Blau.
