问题：
使用 CSS 自定义属性（变量）对多个元素进行动画处理不是'没有按预期工作。期望的结果是使用变量控制不透明度，使内部 div 按顺序出现和消失。
解决方案：
具有自定义类型的 CSS 属性：
使用@property为变量引入自定义类型，让浏览器能够理解变量的数据类型并启用渐变动画：
@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));
}在此示例中，html 元素的背景根据 --opacity 变量从完全透明动画到部分不透明，这随着时间的推移逐渐插值。
以上是如何对 CSS 自定义属性进行动画处理以按顺序显示/隐藏多个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！
