Question

I am making a CSS3 animation with a puzzle piece on my website. The code that I am using is below. For some reason, the animation will only work with Safari, and Chrome. How can I get the animation to work with Firefox and Opera? Thank you for your responses!

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

Answer 1

You’re missing a semicolon in this line

animation:puzzle 4s;
                ---^

Add it and it will work – DEMO