1

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

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*/

所以每个跨度一个一个出现,看起来还可以。每个下一个元素都在值持续时间的延迟中进行动画处理(让我们命名为“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根植我的“时间操作”,我可以像上面描述的那样乘以这个值吗?例如: span.three { transition: transform var(--time-op) ease-out var(--time-op)*2; } 我知道这在 JavaScript 中可用,但也许只有 CSS 有一种方法 :)

4

1 回答 1

1

calc()在 CSS 中使用函数:

span.one { transition: transform time-op ease-out calc(time-op * 0) }
于 2020-08-19T17:16:11.653 回答