[CSS]animation - 애니메이션 효과 중지했다가 다시 시작하기

애니메이션을 동작하던중 중지했다가 중지한 기점으로 다시 시작하는 방법 

 

 

css 애니메이션의 animation-play-state 효과를 사용한다

 

기본값은 running (애니메이션 동작)

 

paused 값을 주면 애니메이션이 중지된다. 

 

 

 

아래 결과는 애니메이션 효과를 주고, 

마우스를 hover하면 animation-play-state :  paused 값을 주도록 만들었다. 

 

결과를 보면 마우스를 올리면 올린 원만 애니메이션이 중지되고,

나머지는 계속해서 애니메이션을 반복하다가

마우스를 떼면 중지된 부분에서 재시작하기 때문에 다른 원들과 다르게 움직이는 것을 볼 수 있다.

 

.box:hover{
  animation-play-state:paused;
}