Я не могу за всю жизнь понять, как перезапустить мою анимацию. Вот где я до сих пор. Он построен с анимацией маскирования svg.Перезапустить анимацию с ключевыми кадрами
http://codepen.io/djmaller/pen/myrrbd
Я хочу, чтобы анимировать на, как это в настоящее время. Но я хочу, чтобы он удерживался в течение секунды или последних 10% анимации, а затем исчезал до начала. Однако я не могу понять, как предотвратить начало анимации. Это похоже на то, что он прекрасно анимируется, но затем он оживляется во всех случайных частях. Настолько разочаровывающе.
У кого-нибудь есть идеи здесь? Я строю неправильно? Я считаю, что решение лежит в @keyframes в CSS
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)}
}