通过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

回答

相关问题