gif动画设置一次只运行一次

Question

我有一个png图像和另一个gif图像。并且gif图像是由设置为一次的photoshop制作的。

现在，当我将鼠标悬停在按钮上时，{g}图像会更改background-image，但如果再次悬停，则会将背景图像更改为gif文件但不会设置动画。

有没有解决方案？

demo

Answer 1

由于与其他浏览器的兼容性，在悬停时显示.gif并不是最好的解决方法。也许你可以考虑使用CSS动画？这是一个很酷的库，由一些CSS关键帧动画组成。

http://daneden.github.io/animate.css/

flipOutX动画可能与你想要的完全匹配。

Answer 2

JsFiddle

认为这就是你想要的：

HTML：

<div id="btn">demo</div>

CSS：

#btn {
  background: blue;
  width: 200px;
  height: 55px;
  color:#fff;
  border-radius:200px;
  position: absolute;
  text-align:center;
  line-height:55px;
  top: 19px;
  right: 107px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

#btn:hover {
  -webkit-animation-name: tilt;
  animation-name: tilt;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes tilt {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(45deg);
    transform: perspective(400px) rotateX(45deg);
  }
}

@keyframes tilt {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(45deg);
    -ms-transform: perspective(400px) rotateX(45deg);
    transform: perspective(400px) rotateX(45deg);
  }
}