1

ボックスの色を変更する単純なアニメーションを実行しようとしています。ただし、ボックスが表示されることはなく、明らかにアニメーションは発生しません。私は持っています：

<!DOCTYPE HTML>
<html>
<head>
<style>
<div>
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
</div>

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
 ....
</body>
</html>

なぜ何も起こらないのですか？私は実際にはWeb開発者ではありませんが、これを試してみようと思いました。私はすべての指示に正しく従っていたようですが、おそらく何かを逃しました。

注として、ここでのすべてはローカルで実行されます。これは、デスクトップ上の.htmlファイルにあります。しかし、それでも機能するはずです。助けていただければ幸いです。ありがとう。

4

2 に答える 2

3

私はあなたが悪い日を過ごしていると思いますが、あなたは持っています

<style>
<div>
    VARIOUS CSS RULES

あなたはそれを次のように書くべきです

<style>
div {
/* snip */
<body>
<div>....</div>

でもうまくいくようです：http://jsfiddle.net/CPL6P/

于 2013-02-20T23:55:18.547 に答える
1 
<style>
<div>
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
</div>

する必要があります

<style>
div {
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
于 2013-02-20T23:54:35.100 に答える