Question

我尝试了很多CSS技巧，但似乎没有按预期工作。
我想在无限循环之前和之后管理animation-delays。

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

这是SVG中的当前代码。为了使内容具有动画效果，我不得不将<style>直接集成到<svg>中：

下面是复杂动画的示例：

/* 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
});

Answer 2

我找到了解决方案，我们必须使用%和keyframes：

.redmove {animation: 5s redmove ease-in infinite;}
@keyframes redmove {
  0% {
    opacity: 0;
    transform: translate(-100px, 0px);
  }
  30% {
    opacity: 1;
    transform: translate(0.510638px, 90.531915px);
  }
  100% {
    opacity: 1;
    transform: translate(0.510638px, 90.531915px);
  }
}

第一个0到30％是动画，而30到100％是“第二”动画，在这种情况下，该块保持在自己的位置。

无限循环前后动画延迟CSS3

2 个答案: