Om schaduweffecten aan een HTML-element toe te voegen met CSS, gebruiken we de `box-shadow` eigenschap. Als je dit effect wilt animeren, kun je dat doen door gebruik te maken van CSS keyframes. De volgende code laat zien hoe dit kan worden gedaan.
CSS code:
```
@keyframes shadow-animation {
0% {box-shadow: 10px 10px 5px #888;}
50% {box-shadow: 20px 20px 10px #888;}
100% {box-shadow: 10px 10px 5px #888;}
}
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
position: relative;
// activeert de animatie
animation-name: shadow-animation;
animation-duration: 4s;
animation-iteration-count: infinite;
}
```
In bovenstaande code is `0%`, `50%`, en `100%` het percentage van de tijd van de animatie. Gedurende 0% van de animatie zal de box schaduw 10px horizontaal en verticaal zijn en 5px wazig. Op 50% zal de schaduw 20px horizontaal en verticaal zijn en 10px wazig. Op 100% zal de schaduw weer 10px horizontaal en verticaal zijn en 5px wazig.
Deze instellingen kun je naar wens aanpassen om het door jou gewenste effect te bereiken. Je zou het ook kunnen combineren met andere animaties om complexere effecten te bereiken.
