Question

尝试使用http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes2中的示例作为参考来制作简单的动画

然而，我试图制作动画的图像仍然存在。 Aptana编辑吐出这些错误 - “属性动画不存在”，属性animation-iteration-count不存在“，”抱歉，at-rule @keyframes未实现“。

我的HTML：

<div id="animate"><img src="flower.jpg"> </div>

我的css：

#animate img 
{
    width:50px;
    height:50px;
    animation: test 25s;
    animation-iteration-count: 10;
    -moz-animation: test 25s;
}

@keyframes test
{
0%   {left:0px; top:0px;}
25%  {left:200px; top:0px;}
50%  {left:200px; top:200px;}
75%  {left:0px; top:200px;}
100% {left:0px; top:0px;}
}

@-moz-keyframes test
{
0%   {left:0px; top:0px;}
25%  {left:200px; top:0px;}
50%  {left:200px; top:200px;}
75%  {left:0px; top:200px;}
100% {left:0px; top:0px;}
}

第三个错误，“抱歉，规则@keyframes未实施” - 是否意味着此功能未在全球正式实施？如果是这样，为什么W3schools的示例代码工作正常，但我的编辑器中的代码不起作用？

在Windows上使用Mozilla 18.0.2

Answer 1

这似乎对我有用。为了确定，我添加了一个包含类。

http://codepen.io/anon/pen/JBdgk

另外，你只编写了moz关键帧。你正在Firefox中测试它，对吗？

Answer 2

Wc3验证器将@ -webkit-keyframes视为未实施，因为它是特定于供应商的。所以这不是你的问题，也不是编辑的问题，它是wc3验证标准。

CSS：对不起，at-rule @keyframes没有实现

2 个答案: