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

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>

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

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

css

opacity

css-animations