Question

我不能为我的生活弄清楚如何重新启动我的动画。到目前为止，我已经到了这里。它是用svg屏蔽动画构建的。

我想让它按照目前的动画进行动画制作。但我想让它保持动画的第二个或最后10％，然后在重新开始之前淡出。但是，我无法弄清楚如何阻止动画提前开始。它就像它的精细动画一样，然后它在所有随机部分中动画。太令人沮丧了。

有人有想法吗？我错了吗？我相信解决方案位于CSS

中的@keyframes中

HTML

<?xml version="1.0" encoding="utf-8"?>

<polygon id="clipmaskpath1" points="52.3,124.6 1.1,133.9 50.1,143.6"/>

<polygon id="clipmaskpath2" points="66.6,0.2 66.6,0.2 50.1,143.6 112.3,126.4 123.6,51.3"/>

<polygon id="clipmaskpath3" points="189.9,50.2 131.3,0.2 66.6,0.2 189.9,110.7 189.9,50.2"/>

<polygon id="clipmaskpath4" points="313.2,0.2 248.5,0.2 189.9,50.2 189.9,110.7"/>

<polygon id="clipmaskpath5" points="313.2,0.2 256.2,51.3 267.5,126.4 329.7,143.6"/>

<polygon id="clipmaskpath6" points="378.7,133.9 327.5,124.6 329.7,143.6"/>

<clipPath id="clipmaskA">
<use xlink:href="#clipmaskpath1" style="overflow:visible;"/>
</clipPath>

<clipPath id="clipmaskB">
<use xlink:href="#clipmaskpath2" style="overflow:visible;"/>
</clipPath>

<clipPath id="clipmaskC">
<use xlink:href="#clipmaskpath3" style="overflow:visible;"/>
</clipPath>

<clipPath id="clipmaskD">
<use xlink:href="#clipmaskpath4" style="overflow:visible;"/>
</clipPath>

<clipPath id="clipmaskE">
<use xlink:href="#clipmaskpath5" style="overflow:visible;"/>
</clipPath>

<clipPath id="clipmaskF">
<use xlink:href="#clipmaskpath6" style="overflow:visible;"/>
</clipPath>

<polygon id="A" style="clip-path:url(#clipmaskA)" points="52.3,124.6 1.1,133.9 50.1,143.6"/>

<polygon id="B" style="clip-path:url(#clipmaskB)" points="66.6,0.2 66.6,0.2 50.1,143.6 112.3,126.4 123.6,51.3"/>

<polygon id="C" style="clip-path:url(#clipmaskC)" points="189.9,50.2 131.3,0.2 66.6,0.2 189.9,110.7 189.9,50.2"/>

<polygon id="D" style="clip-path:url(#clipmaskD)" points="313.2,0.2 248.5,0.2 189.9,50.2 189.9,110.7"/>

<polygon id="E" style="clip-path:url(#clipmaskE)" points="313.2,0.2 256.2,51.3 267.5,126.4 329.7,143.6"/>

<polygon id="F" style="clip-path:url(#clipmaskF)" points="378.7,133.9 327.5,124.6 329.7,143.6"/>

和CSS

  svg {
  display:block;
  width:380px;
  height:144px;
  margin: 0 auto;
 }


/*Shape Fills*/

#A, #D, #F {
  fill:#FFA95A;
  }

#B, #E {
  fill:#FF8300;
  }

#C {
  fill:#FFB571;
  }

/* Opacity Animation */

@keyframes fade{
  90%{opacity:1}
  100%{opacity:0}
}

.fade{
  animation:fade infinite running 2s ease-in-out;
}

/*Mask Animations*/

#svg-logo #clipmaskA {
animation: move-mask-1 infinite running 2s ease-in-out;
}

#svg-logo #clipmaskB {
animation: move-mask-2 infinite running 2s ease-in-out;
}

#svg-logo #clipmaskC {
animation: move-mask-3 infinite running 2s ease-in-out;
}

#svg-logo #clipmaskD {
animation: move-mask-4 infinite running 2s ease-in-out;
}

#svg-logo #clipmaskE {
animation: move-mask-5 infinite running 2s ease-in-out;
}

#svg-logo #clipmaskF {
animation: move-mask-6 infinite running 2s ease-in-out;
}

/* Mask Translations */

@keyframes move-mask-1 {
  0% {transform: translate(-99.99%,0%)}
  15% {transform: translate(0,0)}
}

@keyframes move-mask-2 {
  16% {transform: translate(-18%,99.99%)}
  30% {transform: translate(0,0)}
}

@keyframes move-mask-3 {
  31% {transform: translate(-99.99%,-99.99%)}
  45% {transform: translate(0,0)}
}

@keyframes move-mask-4 {
  46% {transform: translate(-99.99%,99.99%)}
  60% {transform: translate(0,0)}
}

@keyframes move-mask-5 {
  61% {transform: translate(-20%,-99.99%)}
  75% {transform: translate(0,0)}
}

@keyframes move-mask-6 {
  76% {transform: translate(-99.99%,0)}
  90% {transform: translate(0,0)}
}

Answer 1

我只是想到，在每个@keyframe动画的开头，我需要的是0％的翻译，与下一步的掩码位置相匹配。

在我之前

@keyframes move-mask-2 {
  16% {transform: translate(-18%,99.99%)}
  30% {transform: translate(0,0)}
}

我通过添加0％

的行来修复它

@keyframes move-mask-2 {
  0%% {transform: translate(-18%,99.99%)}
  16% {transform: translate(-18%,99.99%)}
  30% {transform: translate(0,0)}
}

使用关键帧重新启动动画

1 个答案: