abbabba Posted July 31, 2015 Share Posted July 31, 2015 (edited) 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 August 1, 2015 by abbabba Link to comment Share on other sites More sharing options...
dsonesuk Posted August 1, 2015 Share Posted August 1, 2015 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 More sharing options...
abbabba Posted August 5, 2015 Author Share Posted August 5, 2015 Yes, I really need animation. The code is just a simplified example... The browser prefixes are usefull but don't solve the problem. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now