[html]<script>
var image = document.getElementById("likes"),
  button = document.getElementById("pause");

if (image.classList && image && button) {
  button.onclick = function () {
    if (this.value == "pause") {
      image.classList.add("pause");
      this.value = "play";
    } else {
      image.classList.remove("pause");
      this.value = "pause";
    }
  };
}

</script>

<style>.like {
  display: block;
  width: 110px;
  height: 110px;
  margin: 0 auto;
  background: url(https://s3-us-west-2.amazonaws.com/s.cd … mation.png)
    0 0 no-repeat;
  background-size: 3000%;
  animation: like-gif steps(28) 1s infinite both;
}
.pause {
  animation-play-state: paused;
}

@keyframes like-gif {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

</style>

<div id="likes" class="like"></div>
<div><input type="button" id="pause" value="pause"></div>[/html]