如何对 CSS 自定义属性进行动画处理以按顺序显示/隐藏多个元素？

动画 CSS 自定义属性/变量

问题：

使用 CSS 自定义属性（变量）对多个元素进行动画处理不是'没有按预期工作。期望的结果是使用变量控制不透明度，使内部 div 按顺序出现和消失。

解决方案：

具有自定义类型的 CSS 属性：

使用@property为变量引入自定义类型，让浏览器能够理解变量的数据类型并启用渐变动画：

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

具有自定义属性的动画：

在动画关键帧中使用自定义属性：

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

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

在此示例中，html 元素的背景根据 --opacity 变量从完全透明动画到部分不透明，这随着时间的推移逐渐插值。

以上是如何对 CSS 自定义属性进行动画处理以按顺序显示/隐藏多个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！