css3 animation not working in firefox but works in chrome

Question

my code as follows

 @-webkit-keyframes arrow-jump2 {
  0%   { opacity: 1;}
  100% { opacity: 1; 
        -webkit-transform: translateX(258px);
        -moz-transform: translateX(258px);
        -0-transform: translateX(258px);
        transform: translateX(258px);
    } 
}
.arrow3 {
  -webkit-animation: arrow-jump2 3s forwards; /* Safari 4+ */
  -moz-animation:    arrow-jump2 2s forwards; /* Fx 5+ */
  -o-animation:      arrow-jump2 2s forwards; /* Opera 12+ */
  animation:         arrow-jump2 2s forwards; /* IE 10+, Fx 29+ */
}

the above code works fine with chrome but not with firefox

Answer 1

 @-webkit-keyframes arrow-jump2 {
  0%   { opacity: 1;}
  100% { opacity: 1; 
        -webkit-transform: translateX(258px);
        -moz-transform: translateX(258px);
        -0-transform: translateX(258px);
        transform: translateX(258px);
    } 
}
 @keyframes arrow-jump2 {
  0%   { opacity: 1;}
  100% { opacity: 1; 
        -webkit-transform: translateX(258px);
        -moz-transform: translateX(258px);
        -0-transform: translateX(258px);
        transform: translateX(258px);
    } 
}
.arrow3 {
  -webkit-animation: arrow-jump2 3s forwards; /* Safari 4+ */
  -moz-animation:    arrow-jump2 2s forwards; /* Fx 5+ */
  -o-animation:      arrow-jump2 2s forwards; /* Opera 12+ */
  animation:         arrow-jump2 2s forwards; /* IE 10+, Fx 29+ */
}

firefox dont need -webkit-