Html 不同浏览器中的动画不同

在我正在开发的网页上获取球的跨浏览器动画时，我遇到了一些问题

当用户到达网页时，足球开始悬停。当用户滚动并且足球点击屏幕顶部时，使用Jquery Waypoints，我移除悬停动画并添加旋转、平移动画，以便足球沿对角线（旋转）向下移动到页面的下一部分。在Firefox中，球可以完美地悬停，而在Chrome中，球根本不会悬停。当元素在Chrome中点击页面顶部时，球会旋转并平移，而在Firefox中，球不会旋转，只会平移

HTML：

<div id="footy">
<img id="kick" class="object footy float" src="<?php echo drupal_get_path('theme', 'footykids'); ?>/bootstrap/img/footy.png">
</div>

使用航路点的JQuery：

( function ($) {
    $( document ).ready( function() {
        $('#kick').waypoint(function() {
            $("#kick").removeClass("float");
            $("#kick").addClass("drop-punt");
        });
    });
});
(jQuery);

---

webkit动画可以通过将关键帧更改为：

@-webkit-keyframes floating{
    0% { -webkit-transform: translate(0px, -10px); }
    50% { -webkit-transform: translate(0px, 10px); }
    100% { -webkit-transform: translate(0px, -10px); }    
}

Firefox问题可以通过向关键帧添加旋转来修复：

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

---

您的webkit关键帧应该使用

-webkit transform

制作小提琴来展示问题的可能性吗？

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