1. 초침을 움직이는 애니메이션
2. 초침을 멈출 수 있는 변수.
3. 초침을 초기화 할 수 있는 함수.
위 세가지를 어떻게 구현 할 것인가?
1. 초침을 움직이는 애니메이션
=> 간단하게 transform: rotate, animation을 이용하면 0deg -> 360deg로 변경 됨에 있어서 몇초 동안 걸리게 할 지 처리가 가능 하다.
2. 초침을 멈출 수 있는 변수
=> 멈출 수 있는 변수 여기서 문제다. html, css에는 변수가 존재 하지 않는다.
html에서 true, false의 값을 가질 수 있는 것을 생각 해보면 checkbox를 이용하는 것으로 해결 할 수 있다.
애니메이션을 도중에 멈추기 위해서는 animation-play-state를 사용 할 수 있다. 즉 checkbox를 체크 되어있으면 animation-play-state: running; 체크 되어있지 않으면, animation-play-state: paused;를 이용 하면 된다.
3. 초침을 초기화 할 수 있는 함수.
=> 초기화를 하기위해서는 무엇이 필요한가? 초기화 버트을 눌렀다는 이벤트가 필요하다.
의사 클래스인 :active를 이용해보자! :active는 mdn에서는 아래와 같이 설명 되어있다.
:active는 버튼을 누른 순간에 활성화 되는 클래스이며, 해당 시점에 애니메이션을 잠시 제거하는 것만으로 초기화를 할 수 있다.
코드와 만드는 영상은 아래에 첨부하였으니, 여기까지 읽었다면 한번 코드는 확인 해보는 것을 추천 한다.
댓글
댓글 쓰기