Как сделать так, чтобы анимация оставалась на последнем ключевом кадре после наведения? - PullRequest
Новая
       29

Как сделать так, чтобы анимация оставалась на последнем ключевом кадре после наведения?

2 голосов
/ 23 сентября 2019

Я пытаюсь сделать выцветший абзац видимым на 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;}
}

1 Ответ

1 голос
/ 23 сентября 2019

Используйте переход и рассмотрите большое значение для времени, чтобы подделка это 

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