마우스를 올려 gif를 재생하기

gif의 프레임을 잘라서 멈춰있는 이미지를 만들 땐 ezgif를 이용하시면 됩니다.

CSS만 이용하기

HTML

<span class="hov-anim-box">
  <img src="https://t1.daumcdn.net/cfile/tistory/996B5C3F5C2DCE5304?original" alt="" class="static">
  <img src="https://t1.daumcdn.net/cfile/tistory/995040355C2DCE5E2E?original" alt="" class="animated">
</span>

CSS

.hov-anim-box .animated {
  display: none
}


.hov-anim-box:hover .animated {
  display: inline
}


.hov-anim-box:hover .static {
  display: none
}

static은 멈춰있는 이미지, animated는 움직이는 이미지입니다.

자바스크립트 없이 실행된다는 장점은 있지만, 한 번 마우스를 올리고 gif가 재생되기 시작하면 멈춰있는 이미지와 움직이는 이미지 사이의 시간 차이가 발생하면서 이상하게 보이는 게 단점입니다.

Javascript 이용하기

HTML

<img src="./chaeng-static.gif" alt="" data-animated="./chaeng-animated.gif" data-static="./chaeng-static.gif" class="hov-anim">

JS

$(".hov-anim").mouseover(function() {
  $(this).attr("src", $(this).data("animated"))
}),
$(".hov-anim").mouseout(function() {
  $(this).attr("src", $(this).data("static"))
});

src에는 멈춰있는 이미지의 경로가 들어갑니다.

data-animated에는 움직이는 이미지의 경로, data-static에는 멈춰있는 이미지의 경로를 넣어 줍니다.

css만으로 작업한 것과는 다르게 항상 멈춰있는 이미지에서 부드럽게 움직이는 이미지로 넘어갑니다.