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>

为什么什么都没有发生？我不是一个真正的网络开发人员，但我想我会试一试。我似乎正确地遵循了所有指示，但也许我错过了一些东西。

请注意，这里的所有内容都是在本地完成的，这只是在我桌面上的 .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 回答