悬停时保持动画的变换位置

Question

悬停时，我希望文本向上移动几个像素。假设我希望动画持续2秒钟，但是如果在这2秒钟之​​后我仍然悬停，则我不希望动画一次又一次地重复。我只希望文本的位置保持在我悬停时的位置。

我尝试了这个但没有用：

.css-class:hover {
  animation-name: in;
  animation-duration: 2s infinite;
  animation-iteration-count: infinite;
}

.css-class {
  animation-name: out;
  animation-duration:2s;
}

@keyframes in {
  from {transform: translateY(0px);}
  to {transform: translateY(-35px);}
}

@keyframes out {
   from {transform: translateY(-35px);}
   to {transform: translateY(0px);}
}

提前感谢。

Answer 1

在您的类块和:hover块中添加此代码行

animation-fill-mode: forwards;