如何解决我可以在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) }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。