gpt4 book ai didi

css - 无限循环之前和之后的动画延迟 CSS3

转载 作者:行者123 更新时间:2023-11-28 01:27:45 25 4
gpt4 key购买 nike

我尝试了很多 CSS 技巧,但似乎没有任何效果像预期的那样有效。
我想管理animation-delays在玩无限循环之前和之后。

目标是在 4/5 秒的动画持续时间内对整个内容进行动画处理并应用无限循环。

这是来自 SVG 的当前代码。为了使内容动画化,我不得不整合 <style>直接进入<svg> :

jsfiddle.net/9bpyewsg

下面是一个复杂动画的例子:

/* mixer */
.mixermove {animation: mixermove .75s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;}
@keyframes mixermove {
0% {opacity:0; transform: translate(108.659574px,500px);}
100% {opacity:1; transform: translate(108.659574, 64.510638);}
}

/* mixer reflection */
.mixerRmove {animation: 1s mixerRmove both;}
@keyframes mixerRmove {
0% {opacity:0; transform: translate(105.977801px,200px);}
100% {opacity:.25;transform: translate(105.977801, 250.377654);}
}

最佳答案

只是一个想法,不确定这是否有帮助。您可以使用 jquery 的事件 oAnimationStartoAnimationEnd

$('.element').one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
// what needs to be done
});

关于css - 无限循环之前和之后的动画延迟 CSS3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51150632/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com