CSS를 이용해서, 클릭한 이미지 하나만 gif로 animation 하는 방법

gif animation이 너무 많으면 여러모로 좋지 않다. 그래서 선택된 하나의 이미지만 gif animation하려고 한다.



1. HTML

  <a class='ani' id='a01' href='#a01' style='background:url(still1.jpg)'>
  <img src='ani1.gif'>
  </a>

  <a class='ani' id='a02' href='#a02' style='background:url(still2.jpg)'>
<img src='ani2.gif'>
  </a>

  <a class='ani' id='a03' href='#a03' style='background:url(still3.jpg)'>
<img src='ani3.gif'>
  </a>

  <a class='ani' id='a04' href='#a04' style='background:url(still4.jpg)'>
<img src='ani4.gif'>
  </a>

  <a class='ani' id='a05' href='#a05' style='background:url(still5.jpg)'>
<img src='ani5.gif'>
  </a>

2. gif animation 이미지는 처음에는 hidden이지만, 클릭되면 visible이 된다.

<style type="text/css">

.ani {

  display: inline-block;

  text-decoration: none;

}

.ani > img {

  visibility:hidden;

}

.ani:target > img {

  visibility: visible;

}

</style>