通過CSS3動畫

我期待在圓上看到一些動畫。我沒有！在加載頁面時，該圓圈保持靜止。我已經在FF和Chrome中試過了。據我所知，語法是正確的？通過CSS3動畫

<!doctype html> 
<html> 
<head> 
<title>CSS animations</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
#balloon-one { 
background:yellow; 
border-radius:50px; 
border:2px solid #FFCC00; 
position:absolute; 
height:100px; 
width:100px; 
top:200px; 
left:300px; 
-webkit-animation: floataround 5s infinite; 
} 
@-webkit-keyframes float { 
0% { -webkit-transform: translateX(-20px) translateY(10px); } 
30% { -webkit-transform: translateX(10px) translateY(-20px); } 
70% { -webkit-transform: translateX(-10px) translateY(20px); } 
100% { -webkit-transform: translateX(-20px) translateY(10px); } 

    0% { -moz-transform: translateX(-20px) translateY(10px); } 
30% { -moz-transform: translateX(10px) translateY(-20px); } 
70% { -moz-transform: translateX(-10px) translateY(20px); } 
100% { -moz-transform: translateX(-20px) translateY(10px); } 
} 
</style> 

</head> 

<body> 

<div id="balloon-one"></div> 
</body> 
</html>

幫助

來源

2012-10-06 cookie

我可以在你的代碼中看到幾個錯誤。首先你的動畫設置爲「floataround」，但你的動畫名稱是合理的「浮動」。然後你混淆了-moz和-webkit前綴。這裏是你的CSS的修正版本：

#balloon-one { 
    background:yellow; 
    border-radius:50px; 
    border:2px solid #FFCC00; 
    position:absolute; 
    height:100px; 
    width:100px; 
    top:200px; 
    left:300px; 
    -webkit-animation: float 5s infinite; 
    -moz-animation: float 5s infinite; 
    animation: float 5s infinite; 
} 
@-webkit-keyframes float { 
    0% { -webkit-transform: translateX(-20px) translateY(10px); } 
    30% { -webkit-transform: translateX(10px) translateY(-20px); } 
    70% { -webkit-transform: translateX(-10px) translateY(20px); } 
    100% { -webkit-transform: translateX(-20px) translateY(10px); } 
} 
@-moz-keyframes float { 
    0% { -moz-transform: translateX(-20px) translateY(10px); } 
    30% { -moz-transform: translateX(10px) translateY(-20px); } 
    70% { -moz-transform: translateX(-10px) translateY(20px); } 
    100% { -moz-transform: translateX(-20px) translateY(10px); } 
} 
@keyframes float { 
    0% { transform: translateX(-20px) translateY(10px); } 
    30% { transform: translateX(10px) translateY(-20px); } 
    70% { transform: translateX(-10px) translateY(20px); } 
    100% { transform: translateX(-20px) translateY(10px); } 
}

試戴鉻，它的工作原理。沒有用Firefox試過。

來源

2012-10-06 12:17:19 TonioElGringo

非常感謝。我只使用了CSS3屬性的一小部分。 – cookie

回答

相關問題