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

Posted 2023-03-30

【中文标题】Css,Js如何将数字转换为动画时间

【英文标题】：Css,Js how to convert a number to the animaition time

【发布时间】：2021-12-23 08:42:22

【问题描述】：

一开始我尝试使用

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

但这不起作用，只有在以下情况下才起作用

animation-delay:0.1s;

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

【问题讨论】：

拜托，写更多的代码，让我们明白你想说什么？

...并阅读如何在 css 中使用自定义属性

这是一个简单的错字。要使用自定义属性，您需要使用 animation-duration: var(--Time)

【参考方案1】：

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

:root 
  --Time: 0.1s;

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

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