키 프레임이있는 애니메이션을 다시 시작하십시오.

내 인생에서 내 애니메이션을 다시 시작하는 방법을 알 수 없습니다. 여기까지 내가 지금까지 얻은 곳이 있습니다. svg 마스킹 애니메이션으로 제작되었습니다.키 프레임이있는 애니메이션을 다시 시작하십시오.

는 나는 현재대로에 애니메이션을 적용 할. 그러나 애니메이션의 초 또는 10 %를 유지 한 다음 다시 시작하기 전에 페이드 아웃해야합니다. 그러나 애니메이션을 일찍 시작하는 것을 방지하는 방법을 알 수는 없습니다. 그것은 괜찮아요에 animates 좋아하지만 그것은 모든 무작위 부분에 animates. 너무 초조해.

누구에게 아이디어가 있습니까? 내가 잘못 만드나요? 나는 솔루션은 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"/>

에 @keyframes 내에있는 생각 691,363,210

<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)} 
}

난 그냥 알아 냈

출처

2014-12-23 dMaller

이 나는 곳과 일치하는 0 % 번역에에 필요한 각 @keyframe 애니메이션의 시작 부분에 마스크는 다음 단계에 있습니다. 내가

@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)} 
}

출처

2014-12-24 14:36:10 dMaller

키 프레임이있는 애니메이션을 다시 시작하십시오.

답변

관련 문제