CODEWITHSUNDEEP
csscss-animationsopacity
A.Noot
A.Noot

Reputation: 49

How to make the animation remain at its last keyframe after hover?

I'm trying to make a faded paragraph become 100% visible on hover and then stay as such even after the user is not hovering over the text anymore.

Here is my code:

#p30 {
  font-family: Frijole;
  opacity: .1;
  font-size: 36px;
  top: 7141px;
  left: 365px;
}

#p30:hover {
  animation: fade 2.3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes fade {
  from {opacity: .1;}
  to {opacity: 1;}
}

Upvotes: 2

Views: 286

Answers (1)

Temani Afif
Temani Afif

Reputation: 272955

Use transition and consider a big value for the time to fake it

.box {
  font-family: Frijole;
  opacity: .1;
  font-size: 36px;
  transition:999s opacity;
}

.box:hover {
  transition:1s opacity;
  opacity:1;
}
<div class="box">text here</div>

Another idea if you want to keep the use of animation

.box {
  font-family: Frijole;
  opacity: .1;
  font-size: 36px;
  animation: fade 1s forwards;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}


@keyframes fade {
  from {opacity: .1;}
  to {opacity: 1;}
}
<div class="box">text here</div>

Upvotes: 1

Related Questions