Why Aren\'t My CSS Variables Animating?

Animate CSS Custom Properties/Variables

In an effort to animate a series of inner divs using CSS variables, a developer has encountered difficulties. Despite utilizing @keyframes to define an animation, the result remains a static black box.

The Solution: Using @property

To resolve this issue, CSS variables should be defined using @property. This allows for specifying the type of the variable, enabling the browser to recognize it as a Number, for instance. With this understanding, the browser can then seamlessly animate transitions for that variable.

Example Code:

@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, @property defines --opacity as a Number. Within the fadeIn animation, the opacity property gradually increases to 1 at the 50% mark. Subsequently, the html element's background color smoothly transitions to a semi-transparent black based on the --opacity variable.

The above is the detailed content of Why Aren\'t My CSS Variables Animating?. For more information, please follow other related articles on the PHP Chinese website!