Guía Completa sobre @keyframes en CSS

Las animaciones en CSS permiten mejorar la experiencia del usuario en la web al agregar transiciones y efectos dinámicos sin necesidad de JavaScript. En esta guía, aprenderás a usar @keyframes para crear animaciones personalizadas.

¿Qué es @keyframes?

@keyframes es una regla en CSS que permite definir una animación a lo largo de una serie de pasos específicos. Se usa junto con la propiedad animation para aplicar efectos a los elementos.

Sintaxis Básica

La sintaxis básica de @keyframes es la siguiente:

@keyframes nombre-animacion {
  from {
    propiedad: valor-inicial;
  }
  to {
    propiedad: valor-final;
  }
}

Por ejemplo, una animación que cambia el color de un fondo de rojo a azul:

@keyframes cambiar-color {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

Aplicando la Animación

Para aplicar una animación, usamos la propiedad animation:

div {
  animation: cambiar-color 2s infinite alternate;
}

Esto hará que el fondo del div cambie de rojo a azul en un ciclo infinito.

Uso de Porcentajes en @keyframes

Podemos definir múltiples estados intermedios con porcentajes:

@keyframes girar {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Aplicándolo a un elemento:

.caja {
  animation: girar 3s linear infinite;
}

Propiedades de la Animación

La propiedad animation acepta varios valores:

• animation-name: Nombre del @keyframes.
• animation-duration: Duración de la animación.
• animation-timing-function: Tipo de aceleración.
• animation-delay: Tiempo antes de iniciar.
• animation-iteration-count: Número de repeticiones.
• animation-direction: Dirección de la animación.

Ejemplo Completo

.caja {
  width: 100px;
  height: 100px;
  background-color: coral;
  animation: mover 2s ease-in-out infinite alternate;
}

@keyframes mover {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}