CSS动画Firefox - Noob矫枉过正？

Question

在所有SO帖子中搜索过，但仍无法找到答案。 我的动画很长，为长篇大论道歉！

它在Chrome上运行良好，而不是在Firefox 30.0上，我看不出原因。

我真的需要这么多的代码，还是这个noob矫枉过正？

@-webkit-keyframes rocket {
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
-moz-transform: translate(2px, 1px) rotate(0deg);
-ms-transform: translate(2px, 1px) rotate(0deg);
-o-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg); }

10% { 
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
-moz-transform: translate(-1px, -2px) rotate(-1deg);
-ms-transform: translate(-1px, -2px) rotate(-1deg);
-o-transform: translate(-1px, -2px) rotate(-1deg);
transform: translate(-1px, -2px) rotate(-1deg); }

20% { 

-webkit-transform: translate(-3px, 0px) rotate(1deg);
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-o-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg); }

30% { 
-webkit-transform: translate(0px, 2px) rotate(0deg);
-moz-transform: translate(0px, 2px) rotate(0deg);
-ms-transform: ttranslate(0px, 2px) rotate(0deg);
-o-transform: translate(0px, 2px) rotate(0deg);
transform: translate(0px, 2px) rotate(0deg); }

40% { 
-webkit-transform: translate(1px, -1px) rotate(1deg);
-moz-transform: translate(1px, -1px) rotate(1deg);
-ms-transform: translate(1px, -1px) rotate(1deg);
-o-transform: translate(1px, -1px) rotate(1deg);
transform: translate(1px, -1px) rotate(1deg); }

50% { 
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
-moz-transform: translate(-1px, 2px) rotate(-1deg);
-ms-transform: translate(-1px, 2px) rotate(-1deg);
-o-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg); }

60% { 
-webkit-transform: translate(-3px, 1px) rotate(0deg);
-moz-transform: translate(-3px, 1px) rotate(0deg);
-ms-transform: translate(-3px, 1px) rotate(0deg);
-o-transform: translate(-3px, 1px) rotate(0deg);
transform: translate(-3px, 1px) rotate(0deg); }
70% {
-webkit-transform: translate(2px, 1px) rotate(-1deg); 
-moz-transform: translate(2px, 1px) rotate(-1deg); 
-ms-transform: translate(2px, 1px) rotate(-1deg); 
-o-transform: translate(2px, 1px) rotate(-1deg);    
 transform: translate(2px, 1px) rotate(-1deg); }

80% { 
-webkit-transform: translate(-1px, -1px) rotate(1deg);
-moz-transform: translate(-1px, -1px) rotate(1deg);
-ms-transform: translate(-1px, -1px) rotate(1deg);
-o-transform: translate(-1px, -1px) rotate(1deg);
transform: translate(-1px, -1px) rotate(1deg); }

90% { 
-webkit-transform: translate(2px, 2px) rotate(0deg);
-moz-transform: translate(2px, 2px) rotate(0deg);
-ms-transform: translate(2px, 2px) rotate(0deg);
-o-transform: translate(2px, 2px) rotate(0deg);
    transform: translate(2px, 2px) rotate(0deg); }

100% { 
-webkit-transform: translate(1px, -2px) rotate(-1deg); 
-moz-transform: translate(1px, -2px) rotate(-1deg); 
-ms-transform: translate(1px, -2px) rotate(-1deg); 
-o-transform: translate(1px, -2px) rotate(-1deg); 
transform: translate(1px, -2px) rotate(-1deg); }
}


@keyframes rocket {
 0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
-moz-transform: translate(2px, 1px) rotate(0deg);
-ms-transform: translate(2px, 1px) rotate(0deg);
-o-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg); }

10% { 
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
-moz-transform: translate(-1px, -2px) rotate(-1deg);
-ms-transform: translate(-1px, -2px) rotate(-1deg);
-o-transform: translate(-1px, -2px) rotate(-1deg);
transform: translate(-1px, -2px) rotate(-1deg); }

20% { 

-webkit-transform: translate(-3px, 0px) rotate(1deg);
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-o-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg); }

30% { 
-webkit-transform: translate(0px, 2px) rotate(0deg);
-moz-transform: translate(0px, 2px) rotate(0deg);
-ms-transform: ttranslate(0px, 2px) rotate(0deg);
-o-transform: translate(0px, 2px) rotate(0deg);
transform: translate(0px, 2px) rotate(0deg); }

40% { 
-webkit-transform: translate(1px, -1px) rotate(1deg);
-moz-transform: translate(1px, -1px) rotate(1deg);
-ms-transform: translate(1px, -1px) rotate(1deg);
-o-transform: translate(1px, -1px) rotate(1deg);
transform: translate(1px, -1px) rotate(1deg); }

50% { 
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
-moz-transform: translate(-1px, 2px) rotate(-1deg);
-ms-transform: translate(-1px, 2px) rotate(-1deg);
-o-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg); }

60% { 
-webkit-transform: translate(-3px, 1px) rotate(0deg);
-moz-transform: translate(-3px, 1px) rotate(0deg);
-ms-transform: translate(-3px, 1px) rotate(0deg);
-o-transform: translate(-3px, 1px) rotate(0deg);
transform: translate(-3px, 1px) rotate(0deg); }
70% {
-webkit-transform: translate(2px, 1px) rotate(-1deg); 
-moz-transform: translate(2px, 1px) rotate(-1deg); 
-ms-transform: translate(2px, 1px) rotate(-1deg); 
-o-transform: translate(2px, 1px) rotate(-1deg);    
 transform: translate(2px, 1px) rotate(-1deg); }

80% { 
-webkit-transform: translate(-1px, -1px) rotate(1deg);
-moz-transform: translate(-1px, -1px) rotate(1deg);
-ms-transform: translate(-1px, -1px) rotate(1deg);
-o-transform: translate(-1px, -1px) rotate(1deg);
transform: translate(-1px, -1px) rotate(1deg); }

90% { 
-webkit-transform: translate(2px, 2px) rotate(0deg);
-moz-transform: translate(2px, 2px) rotate(0deg);
-ms-transform: translate(2px, 2px) rotate(0deg);
-o-transform: translate(2px, 2px) rotate(0deg);
    transform: translate(2px, 2px) rotate(0deg); }

100% { 
-webkit-transform: translate(1px, -2px) rotate(-1deg); 
-moz-transform: translate(1px, -2px) rotate(-1deg); 
-ms-transform: translate(1px, -2px) rotate(-1deg); 
-o-transform: translate(1px, -2px) rotate(-1deg); 
transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes liftoff {

0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
-moz-transform: translate(2px, 1px) rotate(0deg);
-ms-transform: translate(2px, 1px) rotate(0deg);
-o-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg); }

10% { 
-webkit-transform: translate(-1px, -2px) rotate(5deg);
-moz-transform: translate(-1px, -2px) rotate(5deg);
-ms-transform: translate(-1px, -2px) rotate(5deg);
-o-transform: translate(-1px, -2px) rotate(5deg);
transform: translate(-1px, -2px) rotate(5deg); }

20% { 

-webkit-transform: translate(50px, -50px) rotate(10deg); 
-moz-transform: translate(50px, -50px) rotate(10deg); 
-ms-transform:translate(50px, -50px) rotate(10deg); 
-o-transform: translate(50px, -50px) rotate(10deg); 
transform: translate(50px, -50px) rotate(10deg);  }

30% { 
-webkit-transform: translate(100px, -150px) rotate(15deg);
-moz-transform: translate(100px, -150px) rotate(15deg);
-ms-transform: translate(100px, -150px) rotate(15deg);
-o-transform: translate(100px, -150px) rotate(15deg);
transform: translate(100px, -150px) rotate(15deg); }

40% { 
-webkit-transform: translate(250px, -300px) rotate(20deg);
-moz-transform: translate(250px, -300px) rotate(20deg);
-ms-transform: translate(250px, -300px) rotate(20deg);
-o-transform: translate(250px, -300px) rotate(20deg);
transform: translate(250px, -300px) rotate(20deg); }

50% { 
-webkit-transform:translate(350px, -425px) rotate(30deg);
-moz-transform: translate(350px, -425px) rotate(30deg);
-ms-transform: translate(350px, -425px) rotate(30deg);
-o-transform: translate(350px, -425px) rotate(30deg);
transform: translate(350px, -425px) rotate(30deg); }

60% { 
-webkit-transform: translate(500px, -550px) rotate(40deg);
-moz-transform: translate(500px, -550px) rotate(40deg);
-ms-transform: translate(500px, -550px) rotate(40deg);
-o-transform: translate(500px, -550px) rotate(40deg);
transform: translate(500px, -550px) rotate(40deg); }
70% {
-webkit-transform: translate(700px, -700px) rotate(50deg);
-moz-transform: translate(700px, -700px) rotate(50deg); 
-ms-transform: translate(700px, -700px) rotate(50deg);
-o-transform: translate(700px, -700px) rotate(50deg);   
 transform: translate(700px, -700px) rotate(50deg); }

80% { 
-webkit-transform: translate(900px, -800px) rotate(60deg);
-moz-transform: translate(900px, -800px) rotate(60deg);
-ms-transform: translate(900px, -800px) rotate(60deg);
-o-transform: translate(900px, -800px) rotate(60deg);
transform: translate(900px, -800px) rotate(60deg); }

90% { 
-webkit-transform: translate(1100px, -900px) rotate(65deg);
-moz-transform: translate(1100px, -900px) rotate(65deg);
-ms-transform: translate(1100px, -900px) rotate(65deg);
-o-transform: translate(1100px, -900px) rotate(65deg);
    transform: translate(1100px, -900px) rotate(65deg); }

100% { 
-webkit-transform: translate(1300px, -1000px) rotate(65deg); 
-moz-transform: translate(1300px, -1000px) rotate(65deg);  
-ms-transform: translate(1300px, -1000px) rotate(65deg); 
-o-transform: translate(1300px, -1000px) rotate(65deg); 
transform: translate(1300px, -1000px) rotate(65deg);  } 
}


@-webkit-keyframes liftoff  {

0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
-moz-transform: translate(2px, 1px) rotate(0deg);
-ms-transform: translate(2px, 1px) rotate(0deg);
-o-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg); }

10% { 
-webkit-transform: translate(-1px, -2px) rotate(5deg);
-moz-transform: translate(-1px, -2px) rotate(5deg);
-ms-transform: translate(-1px, -2px) rotate(5deg);
-o-transform: translate(-1px, -2px) rotate(5deg);
transform: translate(-1px, -2px) rotate(5deg); }

20% { 

-webkit-transform: translate(50px, -50px) rotate(10deg); 
-moz-transform: translate(50px, -50px) rotate(10deg); 
-ms-transform:translate(50px, -50px) rotate(10deg); 
-o-transform: translate(50px, -50px) rotate(10deg); 
transform: translate(50px, -50px) rotate(10deg);  }

30% { 
-webkit-transform: translate(100px, -150px) rotate(15deg);
-moz-transform: translate(100px, -150px) rotate(15deg);
-ms-transform: translate(100px, -150px) rotate(15deg);
-o-transform: translate(100px, -150px) rotate(15deg);
transform: translate(100px, -150px) rotate(15deg); }

40% { 
-webkit-transform: translate(250px, -300px) rotate(20deg);
-moz-transform: translate(250px, -300px) rotate(20deg);
-ms-transform: translate(250px, -300px) rotate(20deg);
-o-transform: translate(250px, -300px) rotate(20deg);
transform: translate(250px, -300px) rotate(20deg); }

50% { 
-webkit-transform:translate(350px, -425px) rotate(30deg);
-moz-transform: translate(350px, -425px) rotate(30deg);
-ms-transform: translate(350px, -425px) rotate(30deg);
-o-transform: translate(350px, -425px) rotate(30deg);
transform: translate(350px, -425px) rotate(30deg); }

60% { 
-webkit-transform: translate(500px, -550px) rotate(40deg);
-moz-transform: translate(500px, -550px) rotate(40deg);
-ms-transform: translate(500px, -550px) rotate(40deg);
-o-transform: translate(500px, -550px) rotate(40deg);
transform: translate(500px, -550px) rotate(40deg); }
70% {
-webkit-transform: translate(700px, -700px) rotate(50deg);
-moz-transform: translate(700px, -700px) rotate(50deg); 
-ms-transform: translate(700px, -700px) rotate(50deg);
-o-transform: translate(700px, -700px) rotate(50deg);   
 transform: translate(700px, -700px) rotate(50deg); }

80% { 
-webkit-transform: translate(900px, -800px) rotate(60deg);
-moz-transform: translate(900px, -800px) rotate(60deg);
-ms-transform: translate(900px, -800px) rotate(60deg);
-o-transform: translate(900px, -800px) rotate(60deg);
transform: translate(900px, -800px) rotate(60deg); }

90% { 
-webkit-transform: translate(1100px, -900px) rotate(65deg);
-moz-transform: translate(1100px, -900px) rotate(65deg);
-ms-transform: translate(1100px, -900px) rotate(65deg);
-o-transform: translate(1100px, -900px) rotate(65deg);
    transform: translate(1100px, -900px) rotate(65deg); }

100% { 
-webkit-transform: translate(1300px, -1000px) rotate(65deg); 
-moz-transform: translate(1300px, -1000px) rotate(65deg);  
-ms-transform: translate(1300px, -1000px) rotate(65deg); 
-o-transform: translate(1300px, -1000px) rotate(65deg); 
transform: translate(1300px, -1000px) rotate(65deg);  }
}

.shake {
-webkit-animation-name: rocket;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rocket;
-moz-animation-duration: 0.8s;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rocket;
animation-duration: 0.8s;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.liftoff {
-webkit-animation-name: liftoff;
-webkit-animation-duration: 2.5s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: liftoff;
-moz-animation-duration: 2.5s;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: liftoff;
animation-duration: 2.5s;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

Answer 1

嗯......
我认为这有点过分，我使用Prefixfree所以我不必担心这种事情。您可能希望删除Opera前缀，因为Opera切换到WebKit。

Prefixfree