애니메이션 채우기 모드가 작동하지 않습니다.

커서를 가져 가면 그 위에 날기 위해 머리글을 가져 오려고합니다. (CSS3 애니메이션과 함께) 흔들어야합니다. 그것은 내가 원하는 방식으로 날아간다. 그러나 ive가 엘리먼트에서 마우스를 제거한 후에는 마우스를 엘리먼트에서 제거한 후에 원래의 margin-right (flyin 애니메이션 이전)로 되돌아 간다. -animation-fill-mode : forwards ; chromedevtools를 보면 요소가 마진 오른쪽으로 바뀌지 않습니다 (애니메이션이 작동하더라도 ..). 이 문제를 해결할 수 있을까요?애니메이션 채우기 모드가 작동하지 않습니다.

또한 애니메이션이 흔들린 후 첫 번째 애니메이션이 다시 발생하지 않도록하는 방법이 있습니까?

흐른다 애니메이션 :

#name { 
margin:40px 2% 40px 0; 

-webkit-animation:flyin 1.5s; 
-webkit-animation-fill-mode: forwards; 
-webkit-animation-timing-function: ease-in-out; 
-webkit-animation-delay: 1800ms; 
} 

@-webkit-keyframes flyin { 

from{margin-right: 2%;} 
30% {margin-right: 12%;} 
50% {margin-right: 9%;} 
60% {margin-right: 10%;} 
to {margin-right: 10%;} 
}

흔들림 애니메이션 :

#name:hover { 
     **margin-right: 10%; //i also have to set this?! or it starts at 2%** 
     -webkit-animation:shake 0.7s; 
     -webkit-animation-fill-mode: forwards; 
     -webkit-transform-origin:50% 50%; 
     -webkit-animation-iteration-count: infinite; 
     -webkit-animation-timing-function: linear; 


    } 

    @-webkit-keyframes shake { 
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 
100% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
}

출처

2012-11-26 tobbe

애니메이션이 끝난 후 jms에 100ms를 추가하면 동작하지만 ... 매우 추함 : document.getElementById ("name") .style.marginRight = "10 %"; – tobbe

데모를 볼 수 있습니까? – Sam

여기에 http://codepen.io/tobbbe/pen/ozlKc가 있습니다. (예, 애니메이션이 추한 것을 알고 나중에 고칠 것입니다.) – tobbe

가 animation-fill-mode: forward 설정 애니메이션이 실행을 완료 한 후 애니메이션이 제거 될 때까지, 애니메이션 최종 특성 길게 것을 의미한다. 마우스가 마우스 오버를 멈 추면 -webkit-animation 속성이 기본값 (빈 칸)으로 돌아옵니다. 즉, shake 애니메이션이 제거되고 모든 것이 원래 상태로 되돌아갑니다. 마지막 속성에서 애니메이션을 유지하려면 요소에 shake 애니메이션을 적용해야합니다. (즉, animation-fill-mode은 애니메이션이 적용되는 한 효과적입니다.

출처

2012-11-26 22:05:44

흠, 알았습니다. 하지만 요소에 흔들 애니메이션을 적용하는 방법은 무엇입니까? – tobbe

@tobbe 한 가지 옵션은 호버가 시작될 때 프로그래밍 방식으로 적용하고 결코 제거하지 않는 것입니다. –

애니메이션 채우기 모드가 작동하지 않습니다.

답변

관련 문제