Animar Variables CSS

En los últimos años, se han introducido algunas mejoras en las variables CSS (ahora también conocidas como propiedades personalizadas [custom properties]) que permiten que podamos animar su valor.

Declarar una variable CSS

Para poder animar una variable CSS, lo primero que tenemos que hacer es cambiar la forma de declarar dicha variable. Como ya vimos en su momento, una propiedad CSS se puede declarar con la sintaxis de los dos guiones:

header {
  --un-color : blue;
  --otro-color : white;
}

Sin embargo, actualmente tenemos otra forma alternativa de declararlas mediante la regla @property (que es obligatoria si queremos poder animarlas). Esta nueva forma nos permite además indicar aspectos como si la propiedad se hereda o no:

@property --mi-variable {
  syntax: "<color>";
  inherits: false;
  initial-value: #ff0000;
}

En este ejemplo, estamos creando una nueva variable CSS llamada –mi-variable, que acepta valores de tipo «color», que no es heredable, y que tiene un color rojo como valor por defecto.

Tal y como se puede observar, en «syntax» indicamos el tipo de dato que aceptará la variable. Tienes una lista de los tipos de dato soportado en el siguiente enlace. En «inherits» indicamos si el valor de la propiedad la heredan los hijos, y en «initial-value» indicamos un valor inicial.

NOTA: si usamos la vieja sintaxis, el valor de la propiedad siempre se hereda.

Aunque esta forma de declarar variables ya tiene algunos años, Firefox no ofrecía soporte hasta verano del año pasado (2024). Y es ahora que empieza a estar bastante bien soportada cuando nos podemos plantear la posibilidad de empezar a usarla (aunque yo recomendaría esperar todavía un poco; entre 6 meses y un año).

Animar una propiedad CSS personalizada

Si las declaramos con esta nueva sintaxis que hemos visto, ya es posible animar una propiedad CSS personalizada (variable CSS) igual que cualquier otra propiedad CSS, la única cosa que tenemos que tener en cuenta es usar el método var() para acceder al valor de nuestra propiedad CSS personalizada.

Hay que recordar que una de las ventajas de las variables CSS es poder almacenar un valor que podemos utilizar en diferentes partes de nuestro CSS. Por lo que si queremos animar una variable CSS lo suyo es que la podamos utilizar en diferentes partes de nuestro CSS.

Una practica habitual cuando se quieren realizar animaciones, es disponer de una variable con un valor que vaya de 0 al 1, indicando 0 el inicio de la animación y 1 el final de la animación. Veamos un ejemplo de como animar una variable CSS de este tipo, y como usar dicho valor de 0 a 1 para convertirlo después a otros valores según sea necesario:

#container {
  margin: 100px auto;
  width: 300px;
}

@property --mi-propiedad {
  syntax: "";
  inherits: false;
  initial-value: 0;
}

@keyframes mi-animacion {
  from { --mi-propiedad: 0 }
  to { --mi-propiedad: 1 }
}

p {  
  --mi-propiedad: 0;
  color: color-mix(in hsl, red, blue calc(var(--mi-propiedad) * 100%));
  text-align: center;
  transform: translateY(calc(sin(var(--mi-propiedad) * 3.1416 * 2) * 50px))
             rotateZ(calc(var(--mi-propiedad) * 360deg));
  animation: mi-animacion linear 10s infinite; 
}

Puedes probar el anterior CSS con el siguiente código HTML:

<div id="container">
  <p>¡Variables CSS!</p>
</div>

En este ejemplo, estamos usando la variable CSS –mi-propiedad, cuyo valor va de 0 a 1 durante la animación, para interpolar el color del texto con la función color-mix(), para calcular la rotación del texto con rotateZ(), y para calcular la posición vertical con translateY().

En el caso de color-mix() multiplicamos nuestra variable por 100% para calcular el % de interpolación entre los dos colores indicados en la función (red y blue). En rotateZ() multiplicamos por 360 grados para calcular la rotación. Y en translateY() interpolamos el seno desde 0 hasta 2*PI radianes para calcular una posición vertical que vaya variando de forma sinusoide con una amplitud de 50px.

Conclusión

Esta nueva capacidad de la variables CSS para ser animadas, junto a nuevas funciones como color-mix(), sin(), etc… nos abren la posibilidad de realizar animaciones de forma más avanzada y versátil, haciendo cada vez más innecesario el uso de JavaScript para realizar ciertos efectos.