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

Question

我尝试了很多 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);}
  }

Answer 1

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

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