我可以在 CSS 中总结一些时间值吗？

Question

:) 首先-对不起我的英语。其次 - 我有一个问题或困惑。我想用它们之间的关系时间制作动画 spans。有简单的代码：

span.one { transition: transform 1s ease-out; } /*duration 1s delay 0s*/
span.two { transition: transform 1s ease-out 1s; } /*duration 1s delay 1s*/
span.three { transition: transform 1s ease-out 2s; } /*duration 1s delay 2s*/

所以每个 span 一个接一个出现，看起来没问题。每个下一个元素都在值持续时间的延迟中进行动画处理（让我们得到名称 'time-op'）。因此，如果我将值从秒更改为我的 class 'time-op'，它将类似于：

span.one { transition: transform time-op ease-out time-op*0; }
span.two { transition: transform time-op ease-out time-op*1; }
span.three { transition: transform time-op ease-out time-op*2; }

如果我在文件的开头用 :root root 'time-op'，我可以像上面描述的那样乘以这个值吗？例如： span.three { transition: transform var(--time-op) ease-out var(--time-op)*2; } 我知道这在 JavaScript 中可用，但也许只有 CSS 中才有办法 :)

Answer 1

在CSS中使用calc()函数：

span.one { transition: transform time-op ease-out calc(time-op * 0) }

我可以在 CSS 中总结一些时间值吗？

Can I sum up some time values in CSS?

css

animation

timing