html - jquery で setInterval を使用して歯車をループでスクロールさせる

Question

1. 歯車があるので、マウスをホバリングするとスクロール イベントがトリガーされます

2. 私が作成したいアニメーションは、ページが読み込まれた後、歯車が展開し、しばらくすると再び元に戻るというものです。
   右スクロールと左スクロールは実現できるのですが、jqueryで「一定時間後+ロールアウトとロールバック」の書き方が分かりません

html:

リーリー

CSS:

リーリー

Answer 1

リーリー

Answer 2

時々 setInterval 関数を使用してください:

リーリー

Answer 3

方法 1: 純粋な CSS 実装
2 つの歯車に左スクロール スタイルと右スクロール スタイルを追加します
html

リーリー

無限ループスクロールアニメーションをスタイルに追加しました。
外出してしばらくしてから戻る必要がある場合は、translate(-1000px)の値を 2000px などに増やして、必要に応じて制御できます。
translate の値が増加したら、それに応じて回転の値も増加する必要があり、必要に応じて調整することができます。
CSS

リーリー

方法 2: jquery コントロールを使用する
jquery コントロールを使用したい場合は、CSS を変更する必要があります

リーリー

js

リーリー