top:: CSS

Animaciones (CSS Animations)

Las animaciones te permiten crear secuencias de cambios de estilo a lo largo del tiempo. Puedes definir los estados clave (keyframes) y especificar cómo quieres que se realice la animación. Por ejemplo:

/* Animación básica */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation {
  0% { background-color: red; }
  50% { background-color: blue; }
  100% { background-color: green; }
}

En este ejemplo, la clase .box tiene una animación llamada myAnimation que se repite infinitamente. La animación cambia el color de fondo del elemento de rojo a azul y luego a verde a lo largo de 2 segundos.