問題タブ [webkit-animation]

[編集: 解決策は、2 つのコンテナーを作成し、2 つ目のアニメーション コンテナーを左: 100% に設定することでした。]

ページ全体で大きなgifを移動するための非常に基本的なアニメーションがあります。gifの幅は1536pxです。

ページの幅は無限に広がる可能性があるため、アニメーションは right:0px で開始し、right:100% で終了します。実際には、ページが現在使用されている最高のモニター解像度よりも大きくなるとは思いません。

アニメーションが無限に発生しているという感覚を生み出すために、2 つ目のアニメーションを作成し、これを右:-1536px で開始し、右:100% で終了しました。

残念ながら、この 2 番目のアニメーションはより長い距離をカバーしているため、最初のアニメーションよりも速く動いており、試みたシームレス アニメーションは機能しません。animation-duration が持続時間の代わりに一定の 1 ピクセル/秒または同等のもので機能することを指定する方法はありますか? ブラウザは任意のサイズになる可能性があるため、一致するように期間を長くできるとは思いません。

どんな助けやアイデアも大歓迎です！

私のコードは次のとおりです。

これが私のcssコードです。Safari では、2 番目の :hover 疑似クラス ルールは適切に機能しますが、最初のルールは機能しません。Chrome/IE では、どちらも機能します。

何か不足していますか？基本的に同じように設定されています...

CSS アニメーションを使用してアンカー タグの背景色を変更しようとしています。ユーザーがページのどこにいるかに応じて、特定のリンクで色がフェードインするようにします。これを行うために、色をフェードインするキーフレーム設定を作成し、そのアニメーションを要素に追加するクラスを作成しました。次に、そのクラスをjavascriptを介してアンカータグに追加しますが、それを機能させることができないようです。

ここに私のコードがあります

HTML

CSS

JavaScript

サイトのスクロール位置に基づいてこのクラスを追加しようとしていますが、何も取得していないようです。スクロールに基づいてクラスが追加および削除されていることを要素インスペクターで確認できますが、アニメーション効果は表示されません。css アニメーション構文がオフになっていると思います。

どんな助けでも大歓迎です、ありがとう

そのため、blink Webkit フレームワークを使用して、Web サイトのコンテンツを黄色/青色で点滅させています。JS Bin でコードをテストしたところ、動作しましたが、何らかの理由で動作しなくなりました。

コード内の何かを誤って削除してしまったのでしょうか。これは私を夢中にさせています!!