Firefox css3 animations

Question

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 already supports like 90% of all of the CSS3 animations. — Blender
– Blender, Commented Feb 10, 2012 at 1:44

Petah · Accepted Answer · 2012-02-10 01:51:10Z

1

Firefox supports animations:

Specifically CSS transitions are supported in Firefox 4+ and keyframes in Firefox 5+

Docs:

Examples:

answered Feb 10, 2012 at 1:51

Petah

46.2k30 gold badges161 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AJ Naidas Over a year ago

can u look at this for a while in firefox? anywearstyle.com is the one used there css3 animations? because -moz-animation does not work on my current firefox but that worked

Petah Over a year ago

@AJNaidas can you be more specific about what you have tried, and what is not working. Perhaps create a JSFiddle of it.

Petah Over a year ago

@AJNaidas well it maybe because you have @-webkit-keyframes but no @-moz-keyframes

AJ Naidas Over a year ago

re edited according to your second example. It didn't work for me for some reason. Firefox version is 9.0.1.

Fabrizio Calderan Over a year ago

@AJNaidas , 3D transformations have been introduced only with Firefox 10. see mozilla.org/en-US/firefox/10.0.1/releasenotes and bugzilla.mozilla.org/show_bug.cgi?id=505115

Collectives™ on Stack Overflow

Firefox css3 animations

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related