html - 在 mozilla 中，第一个 css keyframe 在你悬停时第二次工作正常，它只是消失了

Question

here is my demo

<div class="item">
    <span>Hover on me</span>
    <div class="overlay">
        <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" class="slideInRight" alt="play-icon">
    </div>
</div>

在任何浏览器上它都能正常工作。在 mozilla 中，第一次悬停时它也能正常工作，但第二次悬停时你看不到播放图标上的动画。(你可以在 mozilla 中打开这个 fiddle 链接，你会看到这个问题)。我怎样才能让它每次都工作而不仅仅是第一次悬停？

Answer 1

您可以使用过渡而不是关键帧，因为您只有一个简单的动画。

.item {
  position: relative;
  height: 200px;
  width: 300px;
  border: 2px solid #000;
  text-align: center;
  line-height: 200px;
  color: #000;
  font-family: 'Arial';
  margin: 25px 0px 0px 25px;
  font-size: 25px;
  font-weight: bold;
  cursor: pointer;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #fff;
  display: none;
}
.overlay img {
  width: 80px;
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.overlay img.slideInRight {
  transition: left 0.2s ease;
  left: 50%;
}
.overlay:hover img.slideInRight {
  left: 0;
}
.item:hover .overlay {
  display: block;
}

<div class="item">
  <span>Hover on me</span>
  <div class="overlay">
    <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" class="slideInRight" alt="play-icon">
  </div>
</div>