Webkit がアニメーションを開始位置にスナップするのに、アニメーションを削除すると Firefox がアニメーションを最初に戻すのはなぜですか? 彼らがこれを処理する方法に違いはありますか？
レコードスリーブの画像を視聴者に向かって（3Dで）下向きに反転させるアニメーションがあります。アイデアは、レコードをめくってシミュレートすることです。
最初の画像が反転すると、背面の画像が表示され、その背後にある次の画像も表示されます。
フィルモード転送を使用して最後にアニメーションを停止し、「前面」画像を更新するために使用するコールバックリスナーが設定されています。これは、背面可視性のおかげで、この時点で非表示になっているためです。開始点に戻ると、次の画像が裏返されるように、実際には後ろに表示された画像に更新されます。それが完了したらdocument.getElementById('flip_rec').className='';、アニメーションを削除するために使用します。これにより、アニメーションが開始点に戻り、次回再開できるようになります。次に、非表示になった裏と裏の画像を更新し、フラグを設定してアニメーションを再度実行できるようにします。
Webkit で画像を削除すると、アニメーションが即座に最初にスナップされるため、これはすべて重要です。これは、画像が置き換えられたことに気付かないため、うまく機能しますが、Firefox ではアニメーションが逆になります。そのため、画像が後方に反転し、新しい前面の画像が徐々に表示され、背面の画像が更新されていることがわかります。効果が台無しです。
これは、アニメーションの設定に使用している CSS です。
.flip1
{
-webkit-animation-name: mymove1;
-moz-animation-name: mymove1;
animation-name: mymove1;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-animation-timing-function: linear;
/*don't go back to that start! Yet.*/
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}