반응형
CSS3로 키프레임 애니메이션을 작동하다가 멈추고 싶을 때가 있다.
대부분 hover나 Class 를 추가하여 멈추는 동작을 넣고 싶을 경우다.
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation: none !important;맨 마지막 줄에 -webkit-animation: none 이 있는 이유는 아이폰 ios 사파리에서 paused; 동작이 제대로 작동하지 않는다. 그렇기 때문에 대안으로 만들어진 코드이다.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
반응형