html - ブラウザごとに異なるアニメーション

Question

開発中の Web ページでボールのクロスブラウザ アニメーションを取得する際に問題が発生しています。

ユーザーが Web ページに到着すると、フットボールがホバリングを開始します。ユーザーがスクロールし、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>

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:

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