对 CSS 自定义属性/变量进行动画处理
在使用 CSS 变量对一系列内部 div 进行动画处理时，开发人员遇到了困难。尽管使用@keyframes来定义动画，结果仍然是一个静态的黑盒子。
解决方案：使用@property
要解决这个问题，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));
}在此示例中，@property 将 --opacity 定义为一个数字。在 fadeIn 动画中，不透明度属性在 50% 标记处逐渐增加到 1。随后，html 元素的背景色根据 --opacity 变量平滑过渡为半透明黑色。
以上是为什么我的 CSS 变量没有动画？的详细内容。更多信息请关注PHP中文网其他相关文章！
