悬停时按住动画的变换位置

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;