Trying to create a CSS3 animation featuring a puzzle piece on my website. Below is the code I'm using. Strangely, the animation only seems to be working on Safari and Chrome. Any tips on how to make it compatible with Firefox and Opera? Appreciate your help!
img#animation
{
length:150px;
width:150px;
position:relative;
animation:puzzle 4s
-moz-animation:puzzle 4s;
-webkit-animation:puzzle 4s;
-o-animation:puzzle 4s;
}
@keyframes puzzle
{
from {left:-400px; top:0px;}
to {left:41px; top:0px;}
}
@-moz-keyframes puzzle
{
from {left:-400px; top:0px;}
to {left:41px; top:0px;}
}
@-webkit-keyframes puzzle
{
from {left:-400px; top:0px;}
to {left:40.5px; top:0px;}
}
@-o-keyframes puzzle
{
from {left:-400px; top:0px;}
to {left:41px; top:0px;}
}