0

サークルでアニメーションが見られることを期待しています。私はしません！円は、ページの読み込み時に静止したままです。FFとChromeで試しました。私の知る限り、構文は正しいですか?

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

ヘルプ

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); }
}

クロムで試してみましたが、動作します。firefoxでは試していません。

于 2012-10-06T12:17:19.617 に答える