3

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

但是，我试图制作动画的图像静止不动。Aptana 编辑器吐出这些错误——“属性动画不存在”、“属性动画迭代计数不存在”、“抱歉，@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

4

2 回答 2

2

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

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

此外，您只编写了 moz 关键帧。您正在 Firefox 中进行测试，对吧？

于 2013-02-21T20:00:06.823 回答
2

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

于 2016-07-29T10:57:31.560 回答