Menu
I'm trying to get an animation to pause on mouse over with the following:
.quote:nth-child(1):hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } But it does not want to pause. Can anybody see what I'm doing wrong?
JSFIDDLE
266
By setting the animation-play-state to paused on hover, the animation will pause, your click targets will stop moving, and your users will be happy.
Have you ever wonder about how we can pause the animation when it starts? We can use animation-delay property but it will only delay the start of the animation, once the animation starts it will continuously animate. Once the CSS keyframe animation starts, we cannot pause it unless we will use javascript.
To remove more than one animation effect from text or an object, in the Animation Pane, press Ctrl, click each animation effect that you want to remove, and then press Delete. To remove all animation effects from text or an object, click the object that you want to stop animating.
Instead of:
.quote:nth-child(1):hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } use:
.quote-wrapper:hover .quote { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } DEMO: http://jsfiddle.net/j4Abq/2/
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
