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

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

提前致谢。

标签： cssanimationhovercss-animationscss-transitions

Answer 1

在你的类块和:hover块中添加这行代码

animation-fill-mode: forwards;