CODEWITHSUNDEEP
htmlcsscss-animationskeyframe
aiddev
aiddev

Reputation: 1429

in mozilla at first css keyframe works fine second time when you hover it just fades

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>

On any browser it works fine. In mozilla first when you hover it works fine as well, but second time when you hover you can't see animation on play icon.(you can open this fiddle link in mozilla and you will see the issue). How can I make it work every time not just for the first hover?

Upvotes: 3

Views: 135

Answers (1)

orlland
orlland

Reputation: 1266

You could use transition instead of keyframes since you just have a simple animation.

.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>

Upvotes: 2

Related Questions