Animar lo inanimable: ángulos, gradientes y colores

Un gradiente no es animable. Nunca lo ha sido: background-image interpola de forma discreta y lo único que consigues al ponerlo en una transición es un salto brusco a mitad de camino. Registrar una custom property no cambia eso, y sin embargo permite animar gradientes, y bordes que giran, y barras que se llenan. El truco es que no animas el gradiente: animas un número, y el gradiente se recalcula a partir de él.

Por qué antes saltaba

El valor calculado de una custom property sin registrar es el flujo de tokens tal como lo escribiste. Interpolar significa calcular un valor intermedio entre dos, y entre dos flujos de tokens no hay ningún intermedio definido: 10px y 40px son, para el motor, dos cadenas sin estructura. Por eso una custom property no registrada se interpola de forma discreta: se queda en el valor inicial hasta la mitad de la transición y salta al final.

/* Sin registrar: esto salta a mitad de camino, no crece. */
.caja { --tamano: 10px; block-size: var(--tamano); transition: --tamano 500ms; }
.caja:hover { --tamano: 40px; }

Al registrar como <length>, el valor calculado deja de ser una cadena y pasa a ser una longitud resuelta en píxeles. Ya hay estructura, ya hay aritmética, ya hay interpolación:

@property --tamano {
  syntax: "<length>";
  inherits: false;
  initial-value: 10px;
}
/* Ahora la misma transicion crece suavemente. */

Esa es toda la magia. Lo que se anima nunca es el gradiente ni la sombra: es un escalar tipado, y la apariencia se recalcula en cada fotograma a partir de él.

Ángulos y gradientes

El caso más vistoso y el más útil. Un borde que gira, imposible antes sin canvas o sin SVG:

@property --angulo {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes girar {
  to { --angulo: 360deg; }
}

.borde-vivo {
  position: relative;
  border-radius: 0.75rem;
  padding: 1px;
  background: conic-gradient(
    from var(--angulo),
    oklch(70% 0.2 20),
    oklch(70% 0.2 200),
    oklch(70% 0.2 20)
  );
  animation: girar 4s linear infinite;
}

.borde-vivo > * {
  border-radius: calc(0.75rem - 1px);
  background: canvas;
}

@media (prefers-reduced-motion: reduce) {
  .borde-vivo { animation: none; }
}

Y la barra de progreso que se llena de verdad, con una sola parada animada y un corte duro:

@property --avance {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.barra {
  --avance: 0%;
  block-size: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    oklch(65% 0.18 145) var(--avance),
    oklch(92% 0.01 260) 0
  );
  transition: --avance 400ms ease-out;
}

El 0 de la segunda parada no es un error: en un gradiente, una parada con posición menor que la anterior se ajusta a la de la anterior, y eso produce un corte limpio sin necesidad de repetir el valor de --avance.

Escribir .barra { --avance: 72%; } desde una regla, o desde el atributo style generado por el servidor, anima la barra sin una línea de JavaScript.

Colores por el camino que tú elijas

Un <color> registrado se interpola con las mismas reglas que cualquier propiedad de color, y eso está bien para transiciones cortas. Cuando quieres control sobre el camino —que un color recorra la rueda de matices en lugar de atravesar el gris por el centro— la técnica es no animar el color, sino animar su matiz y construir el color con él:

@property --matiz {
  syntax: "<angle>";
  inherits: false;
  initial-value: 260deg;
}

.pastilla {
  background: oklch(70% 0.16 var(--matiz));
  transition: --matiz 600ms ease-in-out;
}

.pastilla:hover { --matiz: 20deg; }

Al interpolar el ángulo, el color recorre matices intermedios manteniendo constantes la claridad y el croma. Ninguna interpolación directa entre dos colores hace eso, porque interpola las tres coordenadas a la vez. Es la diferencia entre un degradado que pasa por naranjas y amarillos y otro que pasa por un gris sucio.

El mismo principio sirve para cualquier apariencia que dependa de varios números coordinados. Registra los escalares, anima los escalares, y deja que las declaraciones compongan.

@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }

.aparecer {
  opacity: var(--p);
  translate: 0 calc((1 - var(--p)) * 1rem);
  filter: blur(calc((1 - var(--p)) * 4px));
  transition: --p 320ms ease-out;
}
.aparecer.visible { --p: 1; }

Un solo valor animado gobierna tres propiedades a la vez, cada una con su propia relación con el progreso. Sin custom properties registradas, esto son tres transiciones que hay que mantener sincronizadas a mano.

Lo que cuesta animar una propiedad

Aquí toca la parte honesta. Animar una custom property no se ejecuta en el compositor. Cada fotograma implica recalcular el valor, recalcular las declaraciones que dependen de él y repintar. Comparado con animar transform u opacity, que el compositor resuelve sin tocar el hilo principal, es caro.

Tres reglas para que no se note.

Registra como no heredable todo lo que animes. Con inherits: false, el cambio invalida solo el elemento donde ocurre. Con inherits: true invalida su subárbol entero, y si la animación está en :root, invalida el documento en cada fotograma.

No lo uses para lo que ya sabe hacer el compositor. Si lo que quieres es mover, escalar o desvanecer, usa translate, scale y opacity directamente. La animación paramétrica es para lo que de otro modo sería imposible: gradientes, formas, recortes, sombras compuestas.

Cuenta los elementos. Un borde giratorio en una tarjeta destacada es gratis. El mismo borde en cuarenta tarjetas de una rejilla es un problema medible. Si necesitas el efecto en muchos elementos, mira si puedes moverlo a una única capa con transform.