abbabba

My animation uses keyframes, starts on hover and has a long duration. When I move the mouse out while the animation is still running it stops instantly. I need the interrupted animation returns to it's original values gradually. (Like 'transform' does).

@keyframes KF_Problem { 100% {transform:scale(2);} }.Problem:hover { animation:KF_Problem 3s; }.Problem       { transform:scale(1); transition:3s;}.All_OK:hover  { transform:scale(2); transition:3s;}.All_OK        { transform:scale(1); transition:3s;}

1) How can I do that?

2) Why does Firefox "do the work" automatically and all other browsers don't?

Just try the simplified code with Firefox and with all other modern browsers to see the difference...