animation-play-state实现可暂停的GIF效果实例页面

展示

代码

• HTML：

  <p><input value="可用"></p>
  <p><input value="禁用" disabled></p>

• CSS：

  .love {
      width: 100px; height: 100px;
      background: url(heart-animation.png) no-repeat;
      background-size: 2900%;
      animation: heart-burst steps(28) .8s infinite both;
  }
  .stop {
      animation-play-state: paused;
  }
  @keyframes heart-burst {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 100%;
    }
  }