Übergänge (transitions) in CSS werden verwendet, um den Zustandswechsel von CSS-Eigenschaften zu animieren. Das kann zum Beispiel ein Farbwechsel beim Überfahren eines Elements mit der Maus sein.
Um Übergänge in CSS zu verwenden, müssen Sie die CSS-Eigenschaft `transition` verwenden.
Hier ein Beispiel:
```css
div {
width: 100px;
height: 100px;
background: red;
div:hover {
background: blue;
}
```
Hier ist, was jeder der Werte in `transition: background 0.5s ease;` bedeutet:
- `background`: Das ist die CSS-Eigenschaft, für die die Übergangseffekt hinzugefügt wird. Sie könnten auch “all” verwenden, um alle änderbaren Eigenschaften zu animieren.
- `0.5s`: Das ist die Dauer der Übergang. In diesem Fall dauert sie 0.5 Sekunden.
- `ease`: Dies ist der Timing-Funktion Name, der angibt, wie Zwischenzustände berechnet werden. Andere Werte könnten `linear`, `ease-in`, `ease-out` und `ease-in-out` sein.
Darüber hinaus gibt es zwei weitere Eigenschaften, die Sie zu `transition` hinzufügen könnten:
- `transition-delay`: Dies verzögert den Start des Übergangs. Zum Beispiel, `transition-delay: 1s;` würde den Übergang um 1 Sekunde verzögern.
- `transition-timing-function`: Dies ändert das Geschwindigkeitsprofil des Übergangs. Einige mögliche Werte hierfür könnten `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear` sein.
Ein vollständiges Beispiel könnte so aussehen:
```css
div {
width: 100px;
height: 100px;
background: red;
div:hover {
background: blue;
}
```
In diesem Fall würde der Übergang erst nach 1 Sekunde beginnen und 0.5 Sekunden dauern.
