Animaciones y transiciones en CSS, con ejemplos

CSS tiene dos herramientas para el movimiento: las transiciones, que suavizan el paso de un estado a otro (como al pasar el ratón), y las animaciones, que se mueven solas con fotogramas clave. Las dos son ligeras, no necesitan JavaScript y el navegador las hace con la tarjeta gráfica.

El código

<button class="boton">Pasa el ratón</button>
<div class="cargando" role="status" aria-label="Cargando"></div>
<p class="aparece">Este párrafo aparece desde abajo al cargar.</p>

body { font-family: system-ui, sans-serif; }

/* Transición: de un estado a otro */
.boton {
  padding: 10px 18px;
  border: 0;
  border-radius: 8px;
  background: #1e64af;
  color: white;
  font: inherit;
  transition: background-color 0.2s, transform 0.2s;
}
.boton:hover { background: #00264f; transform: translateY(-3px); }

/* Animación: se repite sola */
.cargando {
  width: 32px;
  height: 32px;
  margin: 16px 0;
  border: 4px solid #c9d6e4;
  border-top-color: #1e64af;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar {
  to { transform: rotate(360deg); }
}

.aparece { animation: subir 0.6s ease-out both; }
@keyframes subir {
  from { opacity: 0; transform: translateY(16px); }
}

/* Quien pide menos movimiento, no lo recibe */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Al cargar, los tres navegadores tienen 2 animaciones en marcha (la del círculo y la del párrafo); la transición del botón espera a que pases el ratón.

Transiciones: de un estado a otro

transition: background-color 0.2s, transform 0.2s le dice al navegador que, cuando esas propiedades cambien por cualquier motivo (:hover, :focus, una clase que añade JavaScript), no salten de golpe sino que tarden 0.2 segundos. Se pone en el estado normal, no en el :hover, para que también se anime al salir.

Animaciones: fotogramas clave

@keyframes define cómo cambia el elemento de principio (from o 0%) a fin (to o 100%), con los pasos intermedios que quieras. animation la aplica: nombre, duración, curva de velocidad y repeticiones (infinite para siempre). En subir solo se escribe el from: el final es el estado normal del elemento, y both hace que el párrafo empiece invisible aunque la animación tarde en arrancar.

Qué propiedades animar

Anima transform (mover, girar, escalar) y opacity: el navegador las resuelve sin recalcular el diseño de la página, así que van fluidas incluso en un celular modesto. Animar width, height, top o margin obliga a recolocar todo en cada fotograma y se nota a tirones.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.