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

问题描述

:)首先-为我的英语感到抱歉。第二-我有问题或困惑。 我要制作动画 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”）。因此，如果我将值从第二个更改为我的类“ 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 来建立'time-op'的名称，是否可以将其乘以上面所述的值？例如： span.three { transition: transform var(--time-op) ease-out var(--time-op)*2; } 我知道这在JavaScript中可用，但是也许只有CSS才有办法：）

解决方法

在CSS中使用calc()函数：

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