Pour animer une ombre de boîte en CSS, vous pouvez utiliser @keyframes et animation. Voici un exemple:
```
/* Define an animation that changes the box-shadow property */
@keyframes boxshadowanimation {
0% {box-shadow: 10px 10px 5px #888;}
50% {box-shadow: none;}
100% {box-shadow: 10px 10px 5px #888;}
}
/* Apply the animation to a box */
.box {
width: 200px;
height: 200px;
background-color: red;
position: relative;
/* This will apply the ‘boxshadowanimation’ to the ‘.box’ over a period of 4 seconds */
animation-name: boxshadowanimation;
animation-duration: 4s;
/* This will make the animation repeat infinitely */
animation-iteration-count: infinite;
}
```
Dans cet exemple, l’ombre de boîte va disparaître lentement et réapparaître. Assurez-vous d’ajouter des préfixes de vendeurs si vous voulez que cela fonctionne sur tous les navigateurs (par exemple, webkit, moz, etc.).
Vous pouvez aussi changer l’animation-timing-function pour changer comment l’animation s’interrompt entre les keyframes (par exemple, liner, ease, etc.)
Notez que CSS animations ne sont pas supportées dans Internet Explorer 9 et versions antérieures.
