Question

我正在尝试做一个简单的动画，我改变一个盒子的颜色。然而，盒子永远不会出现，显然没有动画发生。我有：

<!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文件中。但它似乎应该仍然有效。任何帮助赞赏。感谢。

Answer 1

我认为你只是度过了糟糕的一天，但是你有

<style>
<div>
    VARIOUS CSS RULES

你应该把它写成

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

似乎可以工作：http://jsfiddle.net/CPL6P/

Answer 2

<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 */
}

CSS动画不起作用？

2 个答案: