Build Complex CSS Transitions using Custom Properties and cubic-bezier()
Tags: css, webdev, tutorial, codepen
Published: 2021-07-16 10:37:13

I recently illustrated how [we can achieve complex CSS animations using `cubic-bezier()`](https://dev.to/this-is-learning/advanced-css-animation-using-cubic-bezier-nho) and how to do the same when it comes to CSS transitions. I was able to create complex hover effect without resorting to keyframes. In this article, I will show you how to create even more complex CSS transitions.

This time, let's use the `@property` feature. It's only supported on Chrome-based browsers for now but we can still play with it and demonstrate how it, too, and can be used to build complex animations.

Read the below for more detail about `@property`

{% post https://dev.to/afif/we-can-finally-animate-css-gradient-kdk %}

<sub>I highly recommend reading [my previous article](https://dev.to/this-is-learning/advanced-css-animation-using-cubic-bezier-nho) because I will be referring to a few concepts I explained in detail there. Also, please note that the demos in this article are best viewed in Chromium-based browsers while `@property` support is still limited.</sub>

Let’s start with a demo:

{% codepen https://codepen.io/t_afif/pen/OJpojQX %}

Click on the button (more than once) and see the "magic" curve we get. It may look trivial at first glance because we can achieve such effect using some complex keyframes. But the trick is that there is no keyframe in there! That animation is done using only a transition.

Awesome right? And this is only the beginning, so let's dig in!

----

## The main idea

The trick in the previous example relies on this code:

```css
@property --d1 {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --d2 {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.box {
  top: calc((var(--d1) + var(--d2)) * 1%);
  transition:
    --d1 1s cubic-bezier(0.7, 1200, 0.3, -1200),
    --d2 1s cubic-bezier(0.5, 1200, 0.5, -1200);
}
.box:hover {
  --d1: 0.2;
  --d1: -0.2;
}
```

We're defining two custom properties, `--d1` and `--d2`. Then, we declare the `top` property on a `.box` element using the sum of both those properties. Nothing overly complex yet—just `calc()` applied to two variables.

The two properties are defined as `<number>` and I multiply those values by `1%` to convert them into a percentage. We could define these as `<percentage>` right away to avoid the multiplication. But I've chosen numbers instead in favor of more flexibility for more complex operations later.

Notice that we apply a different transition to each variable—more precisely, a different timing-function with the same duration. It's actually a different *sinusoidal curve* for both variables which is something I get deep into in [my previous article](https://dev.to/this-is-learning/advanced-css-animation-using-cubic-bezier-nho).

From there, the property values change when the `.box` is hovered, triggering the animation. But why do we get the result we see in the demo?

It's all about math. We are adding two functions to create a third one. For `--d1`, we have a function (let's call it `F1`); for `--d2` , we have another one (let's call it `F2`). That means the value of top is `F1 + F2`.

An example to better illustrate:

{% codepen https://codepen.io/t_afif/pen/rNyZGpX %}

The first two transitions illustrate each variable individually. The third one is the sum of them. Imagine that at in each step of the animation we take the value of both variables and we add them together to get each point along the final curve.

Let's try another example:

{% codepen https://codepen.io/t_afif/pen/OJpoxaZ %}

This time, we combine two parabolic curve to get a… well, I don't know its name it but it's another complex curve!

This trick is not only limited to the parabolic and sinusoidal curve. It can work with any kind of timing function even if the result won’t always be a complex curve.

{% codepen https://codepen.io/t_afif/pen/QWpVOwP %}

This time:

* `--d1` goes from `0` to `30` with an `ease-in` timing function
* `--d2` goes from `0` to `-20` with an `ease-out` timing function
The result? The top value goes from `0` to `10` (`30-20`) with a custom timing function (the sum of `ease-in` and `ease-out`).

We are not getting a complex transition in this case — it's more to illustrate the fact that it’s a generic idea not only limited to `cubic-bezier()`.

I think it's time for an interactive demo.

{% codepen https://codepen.io/t_afif/pen/QWpVOZb %}

All you have to do is to adjust a few variables to build your own complex transition. I know `cubic-bezier()` may be tricky, so consider [using this online curve generator](https://cubic-bezier.com/) and also refer to [my previous article](https://dev.to/this-is-learning/advanced-css-animation-using-cubic-bezier-nho).

Here are some examples I made:

![](https://i2.wp.com/css-tricks.com/wp-content/uploads/2021/07/s_E5FA9B60DB2DD68259AE36C4F3A595FF19BEE48F771DA7255CBE6656BCD3C823_1623707586021_image.png?resize=1000%2C218&ssl=1)

![](https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/07/s_E5FA9B60DB2DD68259AE36C4F3A595FF19BEE48F771DA7255CBE6656BCD3C823_1623707394924_image.png?resize=1000%2C198&ssl=1)

![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/s_E5FA9B60DB2DD68259AE36C4F3A595FF19BEE48F771DA7255CBE6656BCD3C823_1623707785542_image.png?resize=1000%2C212&ssl=1)

![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/s_E5FA9B60DB2DD68259AE36C4F3A595FF19BEE48F771DA7255CBE6656BCD3C823_1623708118748_image.png?resize=1000%2C219&ssl=1)

![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/s_E5FA9B60DB2DD68259AE36C4F3A595FF19BEE48F771DA7255CBE6656BCD3C823_1623708352278_image.png?resize=1000%2C218&ssl=1)

As you can see, we can combine two different timing functions (created using `cubic-bezier()` ) to create a third one, complex enough to achieve a fancy transition. The combinations (and possibilities) are unlimited!

In that last example, I wanted to demonstrate how adding two opposite functions lead to the logical result of a constant function (no transition). Hence, the flat line.

----

## Let's add more variables!

You thought we'd stop at only two variables? Certainly not! We can extend the logic to N variables. There is no restriction — we define each one with a timing function and sum them up.

An example with three variables:

{% codepen https://codepen.io/t_afif/pen/gOmdvye %}

In most cases, two variables are plenty to create a fancy curve, but it's neat to know that the trick can be extended to more variables.

----

## Can we subract, multiply and divide variables?

Of course! We can also extend the same idea to consider more operations. We can add, subtract, multiply, divide—and even perform a complex formula between variables.

Here, we're multiplying values:

{% codepen https://codepen.io/t_afif/pen/GRWXxYz %}

![](https://i2.wp.com/css-tricks.com/wp-content/uploads/2021/07/s_E5FA9B60DB2DD68259AE36C4F3A595FF19BEE48F771DA7255CBE6656BCD3C823_1623713012450_image.png?resize=1000%2C225&ssl=1)

![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/s_E5FA9B60DB2DD68259AE36C4F3A595FF19BEE48F771DA7255CBE6656BCD3C823_1623713221967_image.png?resize=1000%2C219&ssl=1)

We can also use one variable and multiply it by itself to get a quadratic function!

{% codepen https://codepen.io/t_afif/pen/ExWeLXp %}

Let's add more fun in there by introducing `min()`/`max()` to simulate an `abs()` function:

{% codepen https://codepen.io/t_afif/pen/WNpgJaO %}

Notice that in the second box we will never get higher than the center point on the y-axis because `top` is always a positive value. (I added a `margin-top` to make the center of box the reference for `0`.)

![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/s_E5FA9B60DB2DD68259AE36C4F3A595FF19BEE48F771DA7255CBE6656BCD3C823_1623713645384_image-1.png?w=998&ssl=1)

![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/s_E5FA9B60DB2DD68259AE36C4F3A595FF19BEE48F771DA7255CBE6656BCD3C823_1623713736514_image.png?w=998&ssl=1)

I won't get into all the math, but you can imagine the possibilities we have to create any kind of timing function. All we have to do is to find the right formula either using one variable or combining multiple variables.

Our initial code can be generalized:

```css
@property --d1 { /* we do the same for d2 .. dn */
  syntax: '<number>';
  inherits: false;
  initial-value: i1; /* the initial value can be different for each variable */
}

.box {
  --duration: 1s; /* the same duration for all */
  property: calc(f(var(--d1),var(--d2), .. ,var(--dn))*[1UNIT]);
  transition:
    --d1 var(--duration) cubic-bezier( ... ),
    --d2 var(--duration) cubic-bezier( ... ),
    /* .. */
    --dn var(--duration) cubic-bezier( ... );
}
.box:hover {
  --d1:f1;
  --d2:f2;
  /* .. */
  --dn:f3;
}
```

This is pseudo-code to illustrate the logic:

1. We use `@property` to define numeric custom properties, each with an initial value.
2. Each variable has its own timing function but the same duration.
3. We define an `f` function that is the formula used between the variables. The function provides a number that we use to multiply the relevant unit. All this runs in `calc()` applied to the property.
4. We update the value of each variable on hover (or toggle, or whatever).

Given this, the property transitions from `f(i1,i2,…,in)` to `f(f1,f2,..,fn)` with a custom timing function.

----

##Chaining timing functions

We've reached the point where we were able to create a complex timing function by combining basic ones. Let's try another idea that allow us to have more complex timing function: **chaining timing functions together**.

The trick is to run the transitions sequentially using the `transition-delay` property. Let's look back at the interactive demo and apply a delay to one of the variables:

{% codepen https://codepen.io/t_afif/pen/ZEeMZrv %}

We are chaining timing functions instead of adding them together for yet another way to create more complex timing functions! Mathematically, it's still a sum, but since the transitions do not run at the same time, we will be summing a function with a constant, and that simulates the chaining.

Now imagine the case with N variables that we are incrementally delayed. Not only can we create complex transitions this way, but we have enough flexibility to build complex timelines.

If you followed my [underline/overlay collections](https://dev.to/afif/still-100-underline-overlay-animations-the-advanced-css-collection-4mol#the-arcade-ii) you will remember the below one I built using such technique.

{% codepen https://codepen.io/t_afif/pen/MWpqRqQ %}

You will find no keyframes there. A small action scene is made entirely using one element and a CSS transition.

Here is a realistic pendulum animation using the same idea:

{% codepen https://codepen.io/t_afif/pen/WNpaGBO %}

Or, how about a ball that bounces naturally:

{% codepen https://codepen.io/t_afif/pen/WNpaoOM %}

Or maybe a ball rolling along a curve:

{% codepen https://codepen.io/t_afif/pen/GRWwedQ %}

See that? We just created complex animations without a single keyframe in the code!

----

## That's a wrap!

I hope you took three key points away from this article and the previous one:

1. We can get parabolic and sinusoidal curves using `cubic-bezier()` that allow us to create complex transitions without keyframes.
2. We can create more curves by combining different timing functions using custom properties and `calc()`.
3. We can chain the curves using the `transition-delay` to build a complex timeline.

Thanks to these three features, we have no limits when it comes to creating complex animations without keyframes

{% codepen https://codepen.io/t_afif/pen/NWpeazj %}