悬停后如何使动画保持在其最后一个关键帧？

Question

我试图使褪色的段落在悬停时变为100％可见，然后即使用户不再将鼠标悬停在文本上也保持原样。

这是我的代码：

#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;}
}

Answer 1

使用过渡并为伪造它的时间考虑一个大的价值

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

如果您想继续使用动画的另一种想法

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