Firefox CSS3動畫

Question

我聽說過可以在firefox中實現css3動畫的技巧和竅門。 我做了一些研究，卻一無所獲。 你們中的任何人是否知道如何在Firefox和Opera（以及IE）（如果可能）中實現css3動畫？ 我會很感激的！ 謝謝！

編輯：

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

Answer 1

Firefox支持動畫：

具體來說，Firefox 4+支持CSS過渡，Firefox 5+支持關鍵幀。

文件：

• https://developer.mozilla.org/en/CSS/CSS_transitions
• https://developer.mozilla.org/en/CSS/@keyframes

例子：

• http://hacks.mozilla.org/2011/05/advanced-animations-in-aurora-with-css3-animations/
• http://paulrouget.com/e/css3animations/