Trying to make a simple animation using example found at http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes2 as a reference
however, the image which i'm trying to animate stands still. Aptana editor spits out these errors -"Property animation doesn't exist, "Property animation-iteration-count doesn't exist", "Sorry, the at-rule @keyframes is not implemented".
my html:
<div id="animate"><img src="flower.jpg"> </div>
my 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;}
}
The third error, "Sorry, the at-rule @keyframes is not implemented" – does it mean that this feature is not officially implemented worldwide? if so, why the example code at W3schools works OK, but the code from my editor does not work?
using Mozilla 18.0.2 on windows
Best Answer
This seems to work for me. I added a containing class just to be sure.
http://codepen.io/anon/pen/JBdgk
Also, you've only written moz keyframes. You are testing this in Firefox, right?