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

【问题标题】：How to continue CSS animation on :hover after mouse leave the element?如何在鼠标离开元素后继续CSS动画：悬停？
【发布时间】：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 看看我的答案

标签： html css animation

【解决方案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>

【讨论】：