html - jquery에서 setInterval을 사용하여 루프에서 기어 스크롤 만들기

Question

1. 기어가 있습니다. 이제 애니메이션은 마우스를 가리키면 스크롤 이벤트가 발생한다는 것입니다.

2. 제가 만들고 싶은 애니메이션은 페이지가 로드된 후 잠시 후 기어가 굴러갔다가 다시 돌아오는 것입니다.
   오른쪽으로 스크롤하고 왼쪽으로 스크롤하면 되는데 jquery에서 "일정 시간 후 + 롤아웃 및 롤백"을 어떻게 쓰는지 모르겠습니다

html:

으아악

css:

으아악

Answer 1

으아악

Answer 2

가끔 setInterval 기능을 사용해 보세요:

으아아아

Answer 3

방법 1: 순수 CSS 구현
두 기어에 왼쪽 스크롤 및 오른쪽 스크롤 스타일 추가
html

으아아아

스타일에 무한 루프 스크롤 애니메이션을 추가했습니다.
나갔다가 잠시 후에 다시 돌아와야 하는 경우 translate(-1000px) 값을 2000px 등으로 늘리고 필요에 따라 제어할 수 있습니다.
번역 값이 증가한 후에는 그에 따라 회전 값도 증가해야 하며 필요에 따라 조정할 수 있습니다.
css

으아아아

방법 2: jquery 컨트롤 사용
jquery 컨트롤을 사용하려면 CSS를 수정해야 합니다

으아아아

js

으아아아