如何在鼠标离开元素后继续CSS动画：悬停？

Posted 2023-03-06

技术标签:

【中文标题】如何在鼠标离开元素后继续CSS动画：悬停？【英文标题】：How to continue CSS animation on :hover after mouse leave the element? 【发布时间】：2015-02-14 17:52:23 【问题描述】：

有动画的例子：

.b-ball_bounce transform-origin: top;
@-webkit-keyframes ball_animation 
    20%   transform: rotate(-9deg);
    40%  transform: rotate(6deg);
    60%  transform: rotate(-3deg);
    80% transform: rotate(1.5deg);
    100% transform: rotate(0deg);

.b-ball_bounce:hover 
  -webkit-animation: ball_animation 1.5s;
  animation-iteration-count: 1;

当鼠标悬停时元素动画开始。但是当鼠标离开时，动画立即停止。但是我想在鼠标离开后完成动画。

这是借助 javascript 的示例：http://codepen.io/Profesor08/pen/pvbzjX 我想对纯 CSS3 做同样的事情，现在看起来是这样的：http://codepen.io/Profesor08/pen/WbxeoW

【问题讨论】：

不！使用纯 CSS 是不可能的。另一点：看起来您在第一个示例中使用的是 jquery（不是“javascript”）。 @jbutler483，jQuery 怎么不是 JavaScript？ :) 我想说 jQuery 是一组 JavaScript 库;因此它会帮助人们找到这个对 jquery 更“熟悉”的问题（正如您正确提到的那样，“是相同的”，但最终，“新手”网络开发人员并没有意识到有任何区别）。很像 javascript 和 typescript @chipChocolate.py 看看我的答案 【参考方案1】：

你可以用过渡做很多事情：

#some-div 
    background-color: rgba(100,100,0,0.2);
    transition: background-color 0.5s ease;

#some-div:hover  background-color: rgba(100,0,0,0.7);

查看JSfiddle 或查看here 了解更多信息

【讨论】：

答案在哪里？你做了同样的事情，但有过渡。但无论如何，动画在鼠标离开元素时停止。【参考方案2】：

CSS 在某些情况下可能会有所帮助，但不是全部，下面是在悬停时和悬停后为字母间距设置动画的代码。

h1

    -webkit-transition:all 0.3s ease;


h1:hover

    -webkit-transition:all 0.3s ease;
    letter-spacing:3px;

<body>
    <h1>Hello</h1>
</body>

【讨论】：

以上是关于如何在鼠标离开元素后继续CSS动画：悬停？的主要内容，如果未能解决你的问题，请参考以下文章

jQuery - 当鼠标悬停在元素上时，如何继续动画？

如何让 jquery 像 CSS 悬停一样悬停？