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中打开这个小提琴链接，你会看到问题）。我怎样才能让它每次都工作，而不仅仅是第一次悬停？

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>

在mozilla的第一个css关键帧工作正常第二次当你盘旋它只是淡出

1 个答案: