Animation different in different browsers - html

Question

I am running into problems with getting cross-browser animation of a ball on a webpage I am developing.
The football starts off hovering when the user arrives on the webpage. When the user scrolls and the football hits the top of the screen, using Jquery Waypoints, I remove the hovering animation and add the spinning, translating animation so that the football moves diagonally(spinning) down the page to the next section. In Firefox, the ball hovers perfectly and in Chrome the ball doesn't hover at all. When the element hits the top of the page in Chrome the ball rotates and translates however in Firefox the ball does not rotate and only translates.
The HTML:
<div id="footy">
<img id="kick" class="object footy float" src="<?php echo drupal_get_path('theme', 'footykids'); ?>/bootstrap/img/footy.png">
</div>
The CSS:
.footy {
z-index: 1999;
width: 150px;
height: auto;
}
.drop-punt {
transform: translate(360px, 360px) rotate(-360deg);
-webkit-transform: translate(360px, 360px) rotate(-360deg);
-o-transform: translate(360px, 360px) rotate(-360deg);
-moz-transform: translate(360px, 360px) rotate(-360deg);
}
.object {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
.float {
animation: floating 2s infinite linear;
-webkit-animation: floating 2s infinite linear;
-moz-animation: floating 2s infinite linear;
-ms-animation: floating 2s infinite linear;
-o-animation: floating 2s infinite linear;
}
#-webkit-keyframes floating{
0% {
transform: translate(0px, -10px);
}
50% {
transform: translate(0px, 10px);
}
100% {
transform: translate(0px, -10px);
}
}
#-moz-keyframes floating{
...
}
#-ms-keyframes floating{
...
}
#-o-keyframes floating{
...
}
#keyframes floating{
...
}
JQuery using Waypoints:
( function ($) {
$( document ).ready( function() {
$('#kick').waypoint(function() {
$("#kick").removeClass("float");
$("#kick").addClass("drop-punt");
});
});
});
(jQuery);

Answer 1

The webkit animation can be fixed by changing the keyframes to:
#-webkit-keyframes floating{
0% { -webkit-transform: translate(0px, -10px); }
50% { -webkit-transform: translate(0px, 10px); }
100% { -webkit-transform: translate(0px, -10px); }
}
The Firefox issue can be fixed by adding a rotation to the keyframes:
#-moz-keyframes floating{
0% { -moz-transform: translate(0px, -10px) rotate(0deg); }
50% { -moz-transform: translate(0px, 10px) rotate(0deg); }
100% { -moz-transform: translate(0px, -10px) rotate(0deg); }
}
Demo fiddle