html - 如何在 :hover after mouse leave the element? 上继续 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或查看 here更多