How Can I Smoothly Animate Custom CSS Properties?

Animating Custom Properties in CSS

Aiming to animate multiple inner divs synchronously, a developer attempted to employ CSS variables but encountered issues. While CSS variables can be utilized in animations, the problem lies in the unexpected behavior of abrupt transitions instead of smooth interpolations.

The solution involves utilizing the @property rule, which defines the type of the variable being animated. In this case, the opacity is specified as a number, allowing the browser to perceive it as such and facilitate gradual animation.

Code Example:

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

@keyframes fadeIn {
  50% {
    --opacity: 1;
  }
}

html {
  animation: 2s fadeIn infinite;
  background: rgba(0 0 0 / var(--opacity));
}

In this example, the opacity variable is explicitly defined as a number, and the fadeIn animation property uses CSS variables to achieve the desired gradual transition effect on the HTML element's background opacity.

The above is the detailed content of How Can I Smoothly Animate Custom CSS Properties?. For more information, please follow other related articles on the PHP Chinese website!