Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I had an idea for nesting CSS animations for infinite cycles where the duration of each cycle is a different prime number so the accumulative effect is a nice non-repetitive animation (hover over the logo with a webkit browser for an idea: http://jsbin.com/usabop/2)
The problem is that when :hover state ends everything instantly jumps back to the original state.
Does anyone have any ideas or suggestions to make this a smoother transition?
Unfortunately, with the way the CSS animations work, there is no easy way to do this. You could use the
animation-play-stateproperty, but that would simply freeze the animation at its current frame when you are no longer hovering.My recommendation would be to use JavaScript to add a class on hover, which then triggers one full cycle of the animation.