CSS动画不起作用？
[英]CSS Animations not working?
问题描述
我正在尝试做一个简单的动画，我改变一个盒子的颜色。 然而，盒子永远不会出现，显然没有动画发生。 我有：
<!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文件中。 但它似乎应该仍然有效。 任何帮助赞赏。 谢谢。
2 个解决方案
解决方案1
3 已采纳 2013-02-20 23:55:18
我想你只是度过了糟糕的一天，但是你有
<style>
<div>
VARIOUS CSS RULES
你应该把它写成
<style>
div {
/* snip */
<body>
<div>....</div>
似乎工作： http ： //jsfiddle.net/CPL6P/
解决方案2
1 2013-02-20 23:54:35
<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动画不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.