jquery - jQuery が純粋な CSS アニメーションを混乱させる

Question

純粋な CSS アニメーションで遊んでみましたが、jQuery が存在する場合、一部のアニメーションが機能しないことに気付きました。これまでのところ、translateY などの変換プロパティが機能しないことに気付きました。

2 つの jsfiddle の例を提供しています。1 つは jQuery を使用し、もう 1 つはそれを使用していません。他のすべては同じです。jQuery ライブラリが含まれているだけで、カスタム JavaScript コードはありません。

• jQuery を使用しない場合(両方のアニメーションが機能していることに注意してください): http://jsfiddle.net/HsPuV/3/
• jQueryの場合 (赤のみ動作): http://jsfiddle.net/HsPuV/4/

CSS コード:

.floating{
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0%);  
    }
    50% {
        transform: translateY(8%);  
    }   
    100% {
        transform: translateY(0%);
    }           
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);  
    }
    50% {
        -webkit-transform: translateY(50%); 
    }   
    100% {
        -webkit-transform: translateY(0%);
    }           
}

開発者ツールのインスペクタを開いて-webkit-animation-nameプロパティを無効にしてから有効にすると、アニメーションの実行が開始されます! Chromeでテストしています。Firefox や IE ではまったく動作しません。

なぜこれが起こっているのか、誰にも手がかりがありますか?

更新:明らかに、一部のシステムではjQuery 1.9.1では機能しません

更新: jQuery のエッジ バージョンで動作するため、おそらく既に解決されたバグです。Firefox で動作させるには、プレフィックス -moz を付ける必要があります。