鼠标离开元素后如何在 :hover 上继续 CSS 动画？

Question

有动画示例：

.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

Answer 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或查看此处了解更多信息