If you follow me for some time, you might know already how much I like css custom properties. Not the variables syntax, which is arguably too verbose, but the power they bring to the table!

In this little demo, I’ll show you how custom properties can be used to create transitioning animations. If you don’t know what this is, or what you could use this for, continue reading…

What is a transitioning animation?

You are probably familiar already with css transitions: the value of a property moves smoothly from one value to another, allowing you update the user interface in a seamless way.

Most of you may already be familiar with the concept of css animations, which will allow you to chain transitions next to another in order to create interesting effects which cannot be achieved by transitioning one property to another value.

So, what is a transitioning animation? It is an animation where the values you transition to is being updated as the animation is going on. For instance, if you have setup an animation to make some element bounce on the page, you could transition this animation so that the “boucing distance” would increase from its initial value to a bigger value when the element is hovered by the mouse cursor.

Another example would be an animation where you could seamlessly enable or disable some of the animations behavior. For instance, you could dynamically change if the bouncing happens top-to-bottom or left-to-right, and the element would gradually start bouncing less in the old direction (and more in the new direction) until it only bounces in the right direction.

My last example would be an animation that empowers a small solar system simulation in css, with planets orbiting around a sun and spinning around themselves, using some animation.

On some mobile devices, you might want not to rotate the planets around themselves (to simulate day/night) for performance reasons, and decide to enable this feature only if your javascript tells you the site runs at steady 60fps for a few seconds. Sadly, switching to a new animation at that point would make your planets “reset” to the initial position as the old animation would be stopped to start the new one. A transitioning animation would allow you to “switch on” the rotation of planets and switch it off at any point, with planets continuing to revolve around the sun smoothly and timely, even if you do.

How do you achieve transitioning animations in css?

Let’s imagine you can use CSS Custom Properties today in your browser (which is true for Firefox and Chrome already, will soon be the case for Safari, and should not take too long for Edge) and that your browser supports the feature properly (that excludes Chrome, sadly).

In short, let’s say we are in 2017. Or that you only care about Firefox for now :-)

You could create a simple bounce animation that would take the bouncing distance as a parameter in the form of a custom property, like this:

a {
  animation: bounce 0.6s infinite; 
  --bounce-distance: 2.5px;
}

@keyframes bounce {
  from { transform: translateY(0px); …; }
  33% { transform: translateY(calc(+1 * var(--bounce-distance, 2.5px))); … }
  66% { transform: translateY(calc(-1 * var(--bounce-distance, 2.5px))); … }
  to { transform: translateY(0px); … }
}

Now, if you want to increase the bouncing as the user mouse over the link, just write:

a:hover {

  --bounce-distance: 7.5px;
}

Isn’t that magic?

Transitioning the custom property itself

Now, if you want something a little bit more sci-fi, how about transitioning the bouncing distance as the animation is going on? CSS Custom Properties Level 2 will have you covered with the following code:

@property --bounce-distance {
  syntax: "<length-percentage>";
  initial-value: 0px;
  inherits: false;
}

And of course your usual  transition: --bounce-distance …  declaration ;-)

What would you want to achieve with this?

The sky seems the only limit, right now…