0

I'm expecting to see some animation on the circle. I doesn't! The circle remains stationary on page load. I've tried it in FF and Chrome. As far as I know the syntax is correct? 

<!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>

help

4

1 回答 1

2

我可以在您的代码中看到几个错误。首先，您的动画设置为“floataround”，但您的动画名称只是“float”。然后你混合了 -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); }
}

在chrome上试过了，可以的。没试过用火狐。

于 2012-10-06T12:17:19.617 回答