Jump to content

Gradual transition of an interrupted keyframes :hover animation

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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...