Using Custom Properties to Wrangle Variations in Keyframe Animations

Use CSS custom properties to flexibly control variants of keyframe animation without the need for a preprocessor! This article will explore how to use CSS and custom properties only to implement customization of keyframe animations, avoiding the additional dependencies brought by using preprocessors such as mixins.

Have you ever wondered how to customize CSS animation keyframes without relying on a preprocessor? I often turn to preprocessors for this, but wouldn't it be better to just use native CSS if I can get rid of this dependency?

It turns out that control of keyframe animation variants can be achieved with CSS alone, thanks to CSS custom properties! Let's dig into how CSS keyframes work and how to leverage CSS and custom properties to enhance them.

CSS animation inheritance mechanism

When we apply animation to elements, we can customize some properties such as duration, delay, etc. Let's take a look at a simple example: there are two classes .walk and .run, which both use the same animation (named breath), but the animation execution speed of .run is faster than .walk (0.5s and 2s respectively).

 <code>@keyframes breath { from { transform: scale(0.5); } to { transform: scale(1.5); } } /* 两者共享相同的动画，但行走比奔跑慢*/ .walk { animation: breath 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

Each time an animation is reused, its behavior varies according to the properties we assign it . Therefore, it can be said that the behavior of the animation inherits from the elements in which it is applied.

But how should the rules of animation (the scaling ratio in this example) be handled? Return to the example of breath animation: The .walk class performs breath animation slowly, but also requires a larger scaling ratio, so we need to set its scaling value to be larger than the .run class, while the .run class adopts smaller and more frequent scaling changes.

In pure CSS, it is common to copy the original animation and then adjust the values ​​directly in the class:

 <code>@keyframes breath { /* 与之前相同... */ } /* 与breath类似，但缩放比例不同*/ @keyframes breathDeep { from { transform: scale(0.3); } to { transform: scale(1.7); } } .walk { animation: breathDeep 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

While this approach works, a better solution is to reuse the properties and values ​​of the animation at the same time! How to do it? Use the inheritance mechanism of CSS variables! Let's see how to implement it:

 <code>/* breath动画的行为基于继承的CSS变量值*/ @keyframes breath { from { transform: scale(var(--scaleStart)); } to { transform: scale(var(--scaleEnd)); } } .walk { --scaleStart: 0.3; --scaleEnd: 1.7; animation: breath 2s alternate; } .run { --scaleStart: 0.8; --scaleEnd: 1.2; animation: breath 0.5s alternate; }</code>

Isn't it cool? Now we can get different effects from the same animation without writing repeated animations!

If you need to go a step further, remember that we can also update CSS custom properties using JavaScript, which not only updates the root variables, but also the variables of specific elements. I find this very powerful because we can create more efficient animations with JavaScript without losing native optimizations for CSS animations. This is a win-win situation!

The above is the detailed content of Using Custom Properties to Wrangle Variations in Keyframe Animations. For more information, please follow other related articles on the PHP Chinese website!