Para animar una sombra de cuadro en CSS, puedes usar la propiedad `box-shadow` junto con `keyframes` y `animation`. A continuación está la estructura general de cómo se hace:
1. Primero, define la propiedad `box-shadow` para el elemento que deseas animar.
```css
.box {
width: 100px;
height: 100px;
background: #333;
box-shadow: 0 0 10px #000;
}
```
2. Luego, usa la regla `@keyframes` para definir la animación. En el siguiente ejemplo, la sombra del cuadro se moverá desde 0px hasta 20px a lo largo del eje X (`left`) y volverá a 0px.
```css
@keyframes moveShadow {
0% {
box-shadow: 0 0 10px #000;
}
50% {
box-shadow: 20px 20px 10px #000;
}
100% {
box-shadow: 0 0 10px #000;
}
}
```
3. Finalmente, aplica la animación al elemento usando la propiedad `animation`. En el siguiente ejemplo, la animación durará 2 segundos, se repetirá indefinidamente (`infinite`) y tendrá un movimiento constante (`linear`).
```css
.box {
animation: moveShadow 2s linear infinite;
}
```
Aquí está todo junto:
```css
.box {
width: 100px;
height: 100px;
background: #333;
box-shadow: 0 0 10px #000;
animation: moveShadow 2s linear infinite;
}
keyframes moveShadow {
0% {
box-shadow: 0 0 10px #000;
}
50% {
box-shadow: 20px 20px 10px #000;
}
100% {
box-shadow: 0 0 10px #000;
}
}
```
Usa este código en tu CSS, deberías ver una "caja" de 100px por 100px cuya sombra se mueve hacia la derecha y hacia abajo antes de volver a su posición original, creando un efecto de "latido". Con `keyframes`, puedes crear animaciones a medida que son más detalladas y suaves que simplemente alternar entre dos estados.
