如何使用单个动画为 CSS 自定义属性的多个实例设置动画？

CSS 中的动画自定义属性

在 CSS 中，自定义属性（也称为 CSS 变量）提供了一种用于定义和重用样式的强大机制整个项目的价值观。它们提供了根据预定义值或变量动态更改样式属性的能力。然而，当涉及到动画时，自定义属性有时会带来挑战。

当尝试使用单个动画为特定属性的多个实例设置动画时，就会出现这样的挑战。通过利用自定义属性，开发人员的目标是让所有后续实例都受到同一动画的影响。然而，在某些情况下，只有一个实例经历所需的动画，而其余实例不受影响。

了解动画中的自定义属性

问题源于基本原理动画中自定义属性的行为。当使用传统 CSS 语法定义时，自定义属性在动画过程中被视为静态值。这意味着属性值不会在动画持续时间内进行插值，从而导致突然变化而不是逐渐过渡。

解决方案：使用 @property 规则

为了克服此限制，开发人员可以将 @property 规则与自定义属性结合使用。 @property 规则允许通过指定变量的类型并提供初始值来定义变量。例如，通过将自定义属性声明为数字，浏览器可以将该属性解释为数值并启用平滑的过渡和动画。

示例实现：

考虑以下示例，我们的目标是使用自定义属性创建一个闪烁的 div 元素opacity:

@property --opacity {
  syntax: '<number>'; /* Define as type number for transition */
  initial-value: 0;
  inherits: false;
}

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

#test {
  width: 100px;
  height: 200px;
  background-color: black;
  animation: fadeIn 1s infinite;
}

#test div {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  opacity: var(--opacity);
}

使用这种方法，自定义属性--opacity被定义为一个数字，允许动画在动画持续时间内平滑地插入不透明度值，实现所需的闪烁效果。

以上是如何使用单个动画为 CSS 自定义属性的多个实例设置动画？的详细内容。更多信息请关注PHP中文网其他相关文章！