關鍵幀基於動畫

welp ..我曾經有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>

你可以看到它是一個基於關鍵幀的動畫，使用'from'和''方法。

welp結果在這裏，我只看到一個沒有動畫的紅色盒子，所以曾經。

謝謝！

來源

2012-09-04 ufk

提示：你只定義了一個動畫名稱，而不是時間。 –

我添加了動畫持續時間，但唯一改變的是盒子陰影......盒子不動，直到動畫持續時間結束 – ufk

盒子正常移動（Chromium 21.0.1180.89）：http：// jsfiddle .net/pz89j/ –

出於某種原因，動畫不喜歡的translateY(0px)順序，所以，如果你移動它，它會很好地工作：http://jsfiddle.net/joshnh/zJ5A9/

來源

2012-09-04 10:01:39 joshnh

驚人的！改變了我的大項目，它也起作用了！非常感謝！ – ufk

關鍵幀基於動畫

回答

相關問題