키 프레임 기반 애니메이션

welp .. 내 Google 크롬에서 작동하는 CSS3 애니메이션을 사용했지만 어떤 경우에는 이유 때문에 작동이 중지되었습니다. 나는 그 코드를 기반으로 예제를 만들려고했다.키 프레임 기반 애니메이션

나는 더 이상 작동하지 않는 이유를 모르겠다. 모든 정보가 크게 감사하겠습니다.

<html> 
<head> 
<style type="text/css"> 
div 
{ 
width:100px; 
height:100px; 
background:red; 
-webkit-transition: all .5s ease; 
-webkit-animation-name: bounceup; 
-webkit-animation-duration: 1.5s; 
} 

@-webkit-keyframes bounceup { 
    from { 
    opacity:0.5; 
    -webkit-transform: translateY(100px) rotate(180deg); 
    -webkit-box-shadow: 20px 20px 80px #000; 
    } 
    to { 
    opacity:1; 
    -webkit-transform: translateY(0px) rotate(0deg); 
    } 
} 


</style> 
</head> 
<body> 

<div></div> 

</body> 
</html>

'보낸 사람'및 '방법'을 사용하여 키 프레임 기반 애니메이션을 볼 수 있습니다.

welp 결과로 애니메이션이없는 빨간색 상자가 표시됩니다.

감사합니다. http://jsfiddle.net/joshnh/zJ5A9/

출처

2012-09-04 ufk

힌트 : 당신이 그것을 이동하는 경우, 그것은 잘 작동합니다 있도록 –

애니메이션 기간을 추가하지만 상자 그림자 만 변경됩니다 ... 상자가 애니메이션 기간이 끝날 때까지 아무데도 움직이지 않습니다 – ufk

상자가 잘 움직입니다 (Chromium 21.0.1180.89) : http : // jsfiddle .net/pz89j/ –

는 어떤 이유로, 애니메이션, translateY(0px)의 순서를 좋아하지 않는 당신은 애니메이션 이름이 아닌 지속 시간을 정의했습니다.

출처

2012-09-04 10:01:39 joshnh

놀라운! 내 큰 프로젝트에서 그것을 변경하고 그것도 작동합니다! 고마워요! – ufk

키 프레임 기반 애니메이션

답변

관련 문제