Jump to content

Gradual transition of an interrupted keyframes :hover animation


abbabba

Recommended Posts

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

Edited by abbabba
Link to comment
Share on other sites

Do you really need animation? and are you including browser prefixes that is required for different browsers and their different browser versions, for example

.Problem       { -webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transition: -webkit-transform 3s ease;-moz-transition: -moz-transform 3s ease;transition: transform 3s ease;            }           .Problem:hover { -webkit-transform: scale(2);-moz-transform: scale(2);-o-transform: scale(2);transform: scale(2); }
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...