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

Posted 2023-03-06

【中文标题】悬停时保持动画的变换位置

【英文标题】：Hold the transform position of an animation while on hover

【发布时间】：2020-09-24 10:29:24

【问题描述】：

我希望文本在悬停时向上移动几个像素。假设我希望动画持续 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);

提前致谢。

【参考方案1】：

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

animation-fill-mode: forwards;

【讨论】：

谢谢，它完全有效。抱歉，但我的低声誉不允许我支持您的回复。顺便说一句，我还必须删除动画迭代计数。