Is there a pure css way to stop animation on hover?

Question

Is there a way to stop constant firing of animation during initial hover? I'm trying to execute a css animation on an icon during hover. When I move the mouse over the element the icon bounces erratically until I stop moving the mouse and sometimes hangs during the animation. I understand that the animation is firing on the initial hover until I stop but I'd like the effect to fully run once and stop unless I hover off.

HTML

<div class="box">
    <a href="#" class="animate bounce"><img src="imagename.png" /></a>
</div>

CSS

a {display: block;}

.animate {
    -webkit-animation-duration: .9s;
    animation-duration: .9s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes bounce {
    0%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    }
    10% {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    }
    20% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    }
    30% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
    }
    60% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    }
}

@keyframes bounce {
    0%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    }
    10% {
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    }
    20% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
    }
    30% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
    }
    60% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    }
}

.bounce:hover,
.bounce:focus {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

I've attached a jsfiddle of the result I'm getting. http://jsfiddle.net/jordan911z/M3vZ2/

possible duplicate of [css3 webkit animation stop on div:hover](http://stackoverflow.com/questions/6556039/css3-webkit-animation-stop-on-divhover) — Raptor, Apr 29 '14 at 06:15

score 2 · Accepted Answer · edited Sep 26 '17 at 14:32

2

The animation-play-state property can pause or resume an animation. It accepts either:

running — the default; an animation plays as normal
paused — the animation is paused

#myelement:hover, #myelement:focus {
    animation-play-state: paused;
}

See full tutorial on SitePoint.

edited Sep 26 '17 at 14:32

Giacomo1968

25,759
11
71
103

answered Apr 29 '14 at 06:17

underscore

6,495
6
39
78

score 1 · Answer 2 · edited Sep 26 '17 at 14:32

1

Try add this to your CSS

animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari and Chrome */

edited Sep 26 '17 at 14:32

Giacomo1968

25,759
11
71
103

answered Apr 29 '14 at 06:18

Omar Sedki

608
6
14

Is there a pure css way to stop animation on hover?

2 Answers2