这可能吗?使用CSS(手写笔)迭代@关键帧
我在手写笔中有以下代码:这可能吗?使用CSS(手写笔)迭代@关键帧,css,node.js,iteration,stylus,css-animations,Css,Node.js,Iteration,Stylus,Css Animations,我在手写笔中有以下代码: for i in (1..3) .l:nth-child({i}) opacity (i / 5) 哪些产出: .l:nth-child(1) { opacity: 0.2; } .l:nth-child(2) { opacity: 0.4; } .l:nth-child(3) { opacity: 0.6; } 这很好,但我想改变它,使不透明度在开始时为0,并在动态使用@keyframes后设置 @keyframes o 0% opacity
for i in (1..3)
.l:nth-child({i})
opacity (i / 5)
哪些产出:
.l:nth-child(1) {
opacity: 0.2;
}
.l:nth-child(2) {
opacity: 0.4;
}
.l:nth-child(3) {
opacity: 0.6;
}
这很好,但我想改变它,使不透明度在开始时为0,并在动态使用@keyframes后设置
@keyframes o
0%
opacity 0
100%
for i in (1..3)
opacity (i / 5)
返回的值明显不正确:
100% {
opacity: 0.2;
opacity: 0.4;
opacity: 0.6;
}
不知道该怎么做,我需要使用函数吗?谢谢你的时间!我想要的结果应该如下所示:
100% {
.l:nth-child(1) {
opacity: 0.2;
}
.l:nth-child(2) {
opacity: 0.4;
}
.l:nth-child(3) {
opacity: 0.6;
}
}
我通过为每次迭代创建一个关键帧来实现:
for i in (1..3)
$keyframe-name = (o- + i)
@keyframes {$keyframe-name}
0%
100%
opacity (i/5)
然后设置动画:
for i in (1..3)
.l:nth-child({i})
opacity 0
animation (o- + i) 0.25s (i/5)s linear forwards
感谢@DJDavid98的评论。所有元素都需要一组不同的关键帧,不能将选择器放入关键帧的步长定义中,只能
property:value代码>双人。啊,我想是的,谢谢你!你的意思是我最终会有:关键帧o1,关键帧o2,关键帧o3。。。等等,每一个不透明度在那里?