これは説明するのが難しいので、少し歩き回ったら許してください。
js / jqueryを使用して、アニメーションを含む要素の幅を決定できたら、ドキュメントヘッダーに追加するスタイルを作成しています。たとえば、空を横切ってスライドする雲があるので、ビューポートの幅を知って、画面全体をアニメーションで覆う必要があります。スタイル変数を定義したら（style）、次のようにhead要素を追加します。
$('html > head').append(style);
これはクロムとFirefoxで完全に機能しますが、サファリはまっすぐに機能しません。私はそれを少し異なる方法で試しました：
$('head').append('<style type="text/css">*@keyframe attributes here*</style>');
繰り返しますが、クロームとファイアフォックスでは問題なく動作しますが、サファリはそれを認識しません。あなたが尋ねる前に、はい、私は-webkit-ベンダープレフィックスを使用しています、そしてはい、それは非ベンダー固有の@keyframes属性の前にリストされています:)
そこで、jqueryキーフレームプラグインを試しましたが、まったく同じ結果になりました。クロームとファイアフォックスでは完全に機能しますが、サファリでは機能しません。ただし、キーフレームのみを使用します。
私はこの問題を抱えている他の人を検索して検索しましたが、見つけることができるのは、適切なベンダープレフィックスを適切な順序で使用することを確認することに関する無数のスレッドです（私はこれを行いました）。
キーフレームをcssファイルにハードコードすると、正常に機能しますが、アニメーションに適切な幅を指定できないため、明らかにそれはうまくいきません。アニメーションとオフセットがループしているため、幅（％ではなく）で作業する必要があります（複雑です）。
ここでの編集は、ヘッダーに追加しているスタイル変数のサンプルです。おそらくサファリはフォーマットにこだわっていますか？
<style>
@-webkit-keyframes charmove { from { -webkit-transform : translateX(0px); } to { -webkit-transform : translateX('+winWidth+'px); }}
@keyframes charmove { from { transform : translateX(0px); } to { transform : translateX('+winWidth+'px); }}
</style>
また、変換要素にも-webkit-を追加せずに試してみました。同じ結果。
よく私はそれを理解しました（そしてもう少し白髪を手に入れました！）
結局のところ、サファリは、アニメーション化する要素でそれらを定義するときに、短縮アニメーションのプロパティを読み取りません。
代わりに：
-webkit-animation: 5s *name-of-anim* infinite linear;
あなたがしなければなりません：
-webkit-animation-name: charmove;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
私は以前にそれを試しましたが（この悪夢の早い段階で）、うまくいきませんでした。私はそれが今働いているのでそれをテストしている間に私は何か他の間違ったことをしたに違いないと思います。
うまくいけば、グーグルは基本的に助けにはならなかったので、この投稿はこの問題に苦しんでいるかもしれない他の誰かを助けることができます。
:)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加