时间戳

首页 > 解决方案 > 悬停后如何使动画保持在最后一个关键帧？

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

问题描述

我试图让一个褪色的段落在悬停时变得 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;}
}

标签： csscss-animationsopacity

解决方案

使用过渡并考虑一个很大的时间来伪造它

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

推荐阅读