jQuery不透明度/淡入淡出动画只能使用一次

Question

我正在建立一个个人网站。我研究并开始使用CSS关键帧，但我自己找到了一个使用jQuery + CSS关键帧的解决方案。

我现在的问题（我假设有一个简单的答案，我看不到，因为我一直盯着我的显示器太久）是我的悬停动画只能工作一次。也就是说，在鼠标悬停时，我的图像1淡入图像2（图像1消失），然后图像2淡入图像3（图像2消失），因此它就像一个级联。但是，这只能工作一次，如果我再次悬停，它将无法正常工作。

所以再次澄清，我希望这个动画级联-fade从image1，到image2，再到image3，然后反向输出（image3，到image2，到image1，就像一些变形效果）每时候用户鼠标：悬停在原始图像。

我假设答案可能与class“动画”被添加但未被删除？我实际上不知道jQuery，但一直在教我自己即兴，并想到如果别人看到我的代码，他们可以发现语法/错误。

ALSO

这是将图像淡化/转换为另一种图像的最佳方法吗？我想要一个光滑的淡入淡出，就像一个“变形” - 这是我做得最好的方式吗？（jquery + keyframes），我应该添加更多关键帧以获得更流畅的效果吗？

这是jsfiddle：http://jsfiddle.net/1xrbxdnk/2/

和源代码：html：

<div class="box">
  <img src="http://alpizano.com/assets/images/venom1.png" width="50%" class="top">
  <img src="http://alpizano.com/assets/images/venom2.png" width="50%" class="middle">
  <img src="http://alpizano.com/assets/images/venom3.png" width="50%" class="bottom">
</div>

的javascript / jQuery的

$("img.top").hover(function() {
  $(this).addClass("animated");
  $("img.middle").addClass("animated2");
  $("img.bottom").addClass("animated3");
})

$("img.bottom").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function() {
    $(this).addClass("animated6")
  $("img.middle").addClass("animated5")
  $("img.top").addClass("animated4")
})

CSS

.box {
  position: relative;
}

img {
  position: absolute;
}

.middle {
  display: none;
}

.bottom {
  display: none;
}

@keyframes anim1 {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
}

@keyframes anim2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes anim3 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes anim6 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes anim5 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes anim4 {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
}

.top.animated {
  animation: anim1 3s ease-in-out;
  opacity: 0;
}

.middle.animated2 {
  animation: anim2 3s ease-in-out;
  display: block;
  opacity: 0;
}

.bottom.animated3 {
  animation: anim3 3s ease-in-out;
  display: block;
  opacity: 1;
}

.bottom.animated6 {
  animation: anim6 3s ease-in-out;

  opacity: 0;
}

.middle.animated5 {
  animation: anim5 3s ease-in-out;

  opacity: 0;
}

.top.animated4 {
  animation: anim4 3s ease-in-out;
  opacity: 1;
}

Answer 1

另一答案