CODEWITHSUNDEEP
javascripthtmlcss
AJ Naidas
AJ Naidas

Reputation: 1434

Firefox css3 animations

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

Upvotes: 0

Views: 930

Answers (1)

Petah
Petah

Reputation: 46060

Firefox supports animations:

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

Docs:

Examples:

Upvotes: 1

Related Questions