html - How to continue CSS animation on :hover after mouse leave the element? -

there example of animation:

.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; } 

when mouse hover element animation start. when mouse leave, animation stops immediately. want finish animation after mouse leave.

this example of javascript: http://codepen.io/profesor08/pen/pvbzjx , want same pure css3, there how looks now: http://codepen.io/profesor08/pen/wbxeow

you can lot of stuff transition:

#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); } 

look @ jsfiddle or here more