Css，Js如何将数字转换为动画时间

Question

起初，我尝试使用

--Time: 0.1s;
animation-delay:--Time;

但这不起作用，只有当

animation-delay:0.1s;

为什么以及如何解决这个问题？

Answer 1

一个常见的最佳实践是在:root伪类上定义自定义属性，这样它就可以在HTML文档中全局应用：

:root {
--Time: 0.1s;
}

然后与var(...)一起使用

element {
animation-delay: var(--Time);
}