Question

I have some simple CSS3 animations here: http://chooseavirb.com/strat/. They work fine on Firefox, but don’t animate at all in Chrome, Safari or IE. Can somebody lend a second set of eyes on the css, an excerpt of which is here (vendor-prefixes have been utilised):

@-webkit-keyframes slideup {
0% {transform: translate(0px, 0px);}
20% {transform: translate(0px,0px);}
25% {transform: translate(0px, -150px);}
45% {transform: translate(0px,-150px);}
50% {transform: translate(0px,-300px);}
70% {transform: translate(0px,-300px);}
75% {transform: translate(0px,-150px);}
95% {transform: translate(0px,-150px);}
100% {transform: translate(0px,px);}
}  

@-moz-keyframes slideup {
0% {transform: translate(0px, 0px)}
20% {transform: translate(0px,0px)}
25% {transform: translate(0px, -150px)}
45% {transform: translate(0px,-150px)}
50% {transform: translate(0px,-300px)}
70% {transform: translate(0px,-300px)}
75% {transform: translate(0px,-150px)}
95% {transform: translate(0px,-150px)}
100% {transform: translate(0px,px)}
}  

@keyframes slideup {
0% {transform: translate(0px, 0px)}
20% {transform: translate(0px,0px) }
25% {transform: translate(0px, -150px)}
45% {transform: translate(0px,-150px) }
50% {transform: translate(0px,-300px) }
70% {transform: translate(0px,-300px)}
75% { transform: translate(0px,-150px)}
95% {transform: translate(0px,-150px)}
100% {transform: translate(0px,px)}
}  

.slideup {
-webkit-animation-name: slideup;
-moz-animation-name: slideup;
-o-animation-name: slideup;
animation-name: slideup;
}

Answer 1

Only Firefox understands transform without a prefix. You need prefixes not only in @keyframes, but within those as well, when you define transitions. Something like this

  @-moz-keyframes slideup {
      0% {  -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); }
      20% { -moz-transform: translate(0px,0px); transform: translate(0px,0px); }
      25% { -moz-transform: translate(0px, -150px); transform: translate(0px, -150px); }
      45% { -moz-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      50% { -moz-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      70% { -moz-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      75% { -moz-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      95% { -moz-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      100% { -moz-transform: translate(0px,px); transform: translate(0px,px); }
  }
  @-webkit-keyframes "slideup" {
      0% {   -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
      20% {  -webkit-transform: translate(0px,0px); transform: translate(0px,0px); }
      25% {  -webkit-transform: translate(0px, -150px); transform: translate(0px, -150px); }
      45% {  -webkit-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      50% {  -webkit-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      70% {  -webkit-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      75% {  -webkit-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      95% {  -webkit-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      100% { -webkit-transform: translate(0px,px); transform: translate(0px,px); }
  }
  @-ms-keyframes "slideup" {
      0% {   -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); }
      20% {  -ms-transform: translate(0px,0px); transform: translate(0px,0px); }
      25% {  -ms-transform: translate(0px, -150px); transform: translate(0px, -150px); }
      45% {  -ms-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      50% {  -ms-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      70% {  -ms-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      75% {  -ms-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      95% {  -ms-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      100% { -ms-transform: translate(0px,px); transform: translate(0px,px); }
  }
  @-o-keyframes "slideup" {
      0% {   -o-transform: translate(0px, 0px); transform: translate(0px, 0px); }
      20% {  -o-transform: translate(0px,0px); transform: translate(0px,0px); }
      25% {  -o-transform: translate(0px, -150px); transform: translate(0px, -150px); }
      45% {  -o-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      50% {  -o-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      70% {  -o-transform: translate(0px,-300px); transform: translate(0px,-300px); }
      75% {  -o-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      95% {  -o-transform: translate(0px,-150px); transform: translate(0px,-150px); }
      100% { -o-transform: translate(0px,px); transform: translate(0px,px); }
  }
  @keyframes "slideup" {
      0% {   transform: translate(0px, 0px); }
      20% {  transform: translate(0px,0px); }
      25% {  transform: translate(0px, -150px); }
      45% {  transform: translate(0px,-150px); }
      50% {  transform: translate(0px,-300px); }
      70% {  transform: translate(0px,-300px); }
      75% {  transform: translate(0px,-150px); }
      95% {  transform: translate(0px,-150px); }
      100% { transform: translate(0px,px); }
  }