悬停后如何继续CSS动画？

Posted 2023-03-06

【中文标题】悬停后如何继续CSS动画？

【英文标题】：How to continue CSS animation after hover out?

【发布时间】：2016-03-09 10:40:52

【问题描述】：

我制作了一个带有动画 img 的按钮。因此，当您将鼠标悬停在上面时，汽车会从左侧行驶并停在中间。当您悬停时-汽车向右行驶。 我做了一个小提琴： https://jsfiddle.net/ufwyjd0o/

.button
  height:150px;
  width: 150px;
  background-color:#468189;
  margin: 100px;
  border-radius: 100%;
  box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.6);
  animation: size 1.5s infinite alternate;
  position: relative;


@keyframes size 
    0%   transform: scale(1.0);
          box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.6); 
    100% transform: scale(1.05);
          box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.4); 


.icon img
  height:75px;
  width:auto;
  position: absolute;
  top: 40px;
  animation: driveout 1s cubic-bezier(.52,.02,.31,.99) both;
  transform: 1s;


@keyframes drive 
    0%   transform: translate3d(-60px,0,0)
    5%  transform: translate3d(60px,0,0)  
    10% transform: translate3d(40px,0,0);


@keyframes driveout 
    0%   transform: translate3d(40px,0,0) 
    100% transform: translate3d(200px,0,0)


.button:hover .icon img 
  animation: drive 10s  cubic-bezier(.52,.02,.31,.99) normal;
  animation-play-state: pause;
  display:block;

【问题讨论】：

问题是？你想让汽车的运动成为一个无限循环吗？还是在悬停时慢慢将其移回原始位置？不是很清楚。

我希望动画在悬停后继续，并且汽车向右移动。当你快速进出时，汽车会闪烁，我需要一切顺利

你应该看看这个 - ***.com/questions/31806649/…。一旦选择器不再适用，动画将不会进一步执行。它会突然停止并回到原来的位置。在您的情况下，一旦您立即将鼠标悬停，在默认状态下指定的动画 (driveout) 将立即开始执行。这就是您看到闪烁的原因。

谢谢。我知道在悬停后返回的过渡。但是我需要动画在悬停时开始播放（汽车开始向右行驶），当汽车停在中间时暂停，当你悬停时，动画继续并且汽车向右行驶。如果您在汽车停止前悬停，汽车必须向右行驶而不会停止和闪烁。也许我们走一些 js 方式？

@Harry 是的，需要脚本，我的问题是根据 OP 的需要了解如何完成该脚本。

【参考方案1】：

如果您希望在 hoveron 和 hoverout 上使用不同的动画（与 javascript 中的 mouseover 和 mouseout 相同），那么您最好的选择就是这样。

.button 
 // what you want to happen on hoverout
 animation: // your hoverout animation


.button:hover 
 // what you want to happen on hoverover
 animation: // your hoverover animation.

【讨论】：

如果您查看代码，OP 已经有了这个（两个不同的动画悬停进出），但他们正在寻找的是即使您进入并持续到结束状态的动画快出来。这对那里没有帮助。