I have heard of hacks and tricks that can be done to implement css3 animations in firefox. I did some research and came to nothing. Do any of you here know how to implement css3 animations in firefox and opera (and IE if possible)? I’ll really appreciate it! Thanks!
EDIT:
#pictureMove {
-webkit-animation:pictureTransition 25s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name:pictureTransition;
-moz-animation-duration::25s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}
@-webkit-keyframes pictureTransition {
from,5% {-webkit-transform:translateX(0px);-moz-transform:translate(0px);}
10%,25% {-webkit-transform:translateX(-1024px);-moz-transform:translate(-1024px);}
30%,45% {-webkit-transform:translateX(-2048px);-moz-transform:translate(-2048px);}
50%,65% {-webkit-transform:translateX(-3072px);-moz-transform:translate(-3072px);}
70%,85% {-webkit-transform:translateX(-4096px);-moz-transform:translate(-4096px);}
90%,to {-webkit-transform:translateX(-5120px);-moz-transform:translate(-5120px);}
}
@-moz-keyframes pictureTransition {
from,5% {-moz-transform:translateX(0px);}
10%,25% {-moz-transform:translateX(-1024px);}
30%,45% {-moz-transform:translateX(-2048px);}
50%,65% {-moz-transform:translateX(-3072px);}
70%,85% {-moz-transform:translateX(-4096px);}
90%,to {-moz-transform:translateX(-5120px);}
}
Firefox supports animations:
Specifically CSS transitions are supported in Firefox 4+ and keyframes in Firefox 5+
Docs:
Examples: