키 프레임 애니메이션을 중지하는 방법

키 프레임 애니메이션을 어떻게 멈출 수 있는지 알려주십시오. 다음 예제에서 div 요소는 맨 위로 백업하고 다시 아래로 이동합니다. 괭이는 부자가 된 후에 기능을 멈출 수 있습니까 to{} 상태?키 프레임 애니메이션을 중지하는 방법

<style> 
div 
{ 
    width:100px; 
    height:100px; 
    background:red; 
    position:relative; 
    animation:mymove 5s infinite; 
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ 
} 

@keyframes mymove 
{ 
    from {top:0px;} 
    to {top:200px;} 
} 

@-webkit-keyframes mymove /* Safari and Chrome */ 
{ 
    from {top:0px;} 
    to {top:200px;} 
} 
</style> 

<div></div>

출처

2014-02-24 Behseini

당신은 값으로 forwards으로 animation-fill-mode 속성을 사용할 수 있습니다. MDN 가입일

forwards
타겟이 실행 중에 발생한 마지막 키 프레임에 의해 설정된 계산 된 값을 유지한다. 마지막 키 프레임 은 animation-direction 및 animation-iteration-count의 값에 따라 다릅니다. 여기

당신은 이동 :

div { 
    -webkit-animation: mymove 5s forwards; /* Safari and Chrome */ 
    /* Add other vendor-prefixes if needed */ 
    animation: mymove 5s forwards; 
}

WORKING DEMO.

출처

2014-02-24 22:30:12

안녕하세요, 답장을 보내 주셔서 감사합니다.하지만이 기능은 저에게 효과가 없습니다. 이 예제를보실 수 있습니다 : http : //jsfiddle.net/Behseini/VXCXL/4/ 작동하지 않는 것을 확인하십시오. – Behseini

예제에서 박스 투명도는 CSS 규칙. – Behseini

@Behseini 죄송합니다. 더 자세한 내용을 추가하는 동안 전기가 끊어졌습니다. 당신은'animation' 속성에서'forwards' 키워드를 사용해야합니다. –

애니메이션 횟수에 "무한한"것이 문제입니다. 실제로는 "무한"을 의미합니다. 그것을 제거하고 채우기 모드를 추가하십시오 : 앞으로, 그러면 끝납니다.

출처

2014-02-24 22:36:00

안녕하세요, Michael, 답장을 보내 주셔서 감사합니다.이 예제를 http://jsfiddle.net/Behseini/VXCXL/4/에서 보시고 제게 적합하지 않습니까? – Behseini

이 바이올린은 파이어 폭스, 크롬 및 사파리에서 나를 위해 일하고 있습니다. (물론 -webkit-animation-fill-mode도 있어야합니다 : 완성도를 위해 전달). IE 9 이하를 사용하고 있습니까? 그렇다면 애니메이션이 지원되지 않습니다. –

간단합니다.

자바 스크립트로 재생해야합니다. 직접 CSS로! 불가능합니다.

<div class="animation"><h2>¡HOVER ME!</h2></div>

이 DIV 애니메이션이 있습니다

나는 코드는 jsFiddle

에

http://jsfiddle.net/s4rmw/

을 예를 넣습니다. 호버 때! 애니메이션이 중지되었습니다.

내 질문에 대한 답변입니다.

안부!

출처

2014-02-25 00:15:36 JoseAPL

키 프레임 애니메이션을 중지하는 방법

답변

관련 문제