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;}
}

3 番目のエラー、"Sorry, the at-rule @keyframes is not implemented" は、この機能が世界中で公式に実装されていないことを意味しますか? もしそうなら、なぜ W3schools のサンプル コードは問題なく動作するのに、私のエディタのコードは動作しないのですか?

Windows で Mozilla 18.0.2 を使用する

4

2 に答える 2

2

これは私にとってはうまくいくようです。念のため、包含クラスを追加しました。

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

また、あなたは moz キーフレームしか書いていません。これを Firefox でテストしていますよね？

于 2013-02-21T20:00:06.823 に答える