Du kannst einen Boxschatten in CSS animieren, indem du `transition` und `:hover` properties verwendest. Hier ist ein einfaches Beispiel:
```css
.box {
width: 200px;
height: 200px;
background: #333;
transition: box-shadow 0.3s ease-in-out;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}
.box:hover {
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
```
In diesem Beispiel beginnt die `.box` ohne Schatten (`0px 0px 0px 0px rgba(0,0,0,0)`). Wenn du mit der Maus darüber fährst (`:hover`), erscheint ein Schatten (`10px 10px 5px 0px rgba(0,0,0,0.75)`).
Der `transition` Wert sagt dem Browser, dass jede Änderung des `box-shadow`-Wertes über `0.3` Sekunden animiert werden soll, anstatt sofort zu geschehen.
Einstellen der `transition` Eigenschaft sorgt für eine sanfte Animation. Die Zeitspanne und Art der Animation kann durch Anpassung der `transition` Eigenschaftswerte kontrolliert werden. In diesem Fall ist es `0.3s ease-in-out`, was bedeutet, dass die Animation über 0.3 Sekunden hinweg stattfinden wird, und die “ease-in-out” Option sorgt dafür, dass die Geschwindigkeit der Animation allmählich anläuft, dann wieder verlangsamt.
Du kannst diese Werte anpassen, um die Geschwindigkeit und Art der Animation nach deinen Wünschen zu ändern.
