CODEWITHSUNDEEP
cssanimationtransformkeyframe
Saucy Rooster
Saucy Rooster

Reputation: 13

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

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/

Upvotes: 1

Views: 7023

Answers (2)

Omar Sedki
Omar Sedki

Reputation: 608

Try add this to your CSS

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

Upvotes: 1

underscore
underscore

Reputation: 6887

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

  1. running — the default; an animation plays as normal
  2. paused — the animation is paused
#myelement:hover, #myelement:focus {
    animation-play-state: paused;
}

See full tutorial on SitePoint.

Upvotes: 2

Related Questions