我想在以下代码中使用CSS关键帧(animation-delay)叠加动画效果,但不知道如何通过编程实现?
.r1 {
animation-name: move1;
animation-delay: 0.5s;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-direction: normal;
animation-fill-mode: forwards;
}
.r2 {
animation-name: move1;
animation-delay: 1.5s;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-direction: normal;
animation-fill-mode: forwards;
}
.r3 {
animation-name: move1;
animation-delay: 2.5s;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-direction: normal;
animation-fill-mode: forwards;
}
@keyframes move1 {
to {
transform: translateX(200px);
}
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="r1" x="10" y="20" width="100" height="100" fill="red"/>
<rect class="r2" x="10" y="130" width="100" height="100" fill="green"/>
<rect class="r3" x="10" y="240" width="100" height="100" fill="blue"/>
</svg>
animation-duration
是针对每个类硬编码的,而animation-delay
是为第一个类硬编码的,即r1
。
我如何将延迟传递给r2和r3,例如
r2 delay= r1 delay + r1 duration->0.5+1=1.5s
以及
r3 delay= r2 delay + r2 duration ->1.5+1=2.5s
在JavaScript中是否有任何按类别提供animation-duration
的方法?
我尝试使用Element.getAnimations()来实现这一点,但不确定是否有任何按类别提供动画时长的内容。
我不想手动执行此操作,因为我的svg中有许多类别。
非常感谢您的帮助。