Animate.css: Animate on Hover?

[jr-smith]

Animate.css works just fine (great project, btw!)

However, I'm curious about utilizing it to only animate on hover.

I have tried adding a class I thought would work, however it is not.

.animatedhover:hover {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

<span class="icon animatedhover bounce"></span>

Let it be noted that regular animated class works fine.

<span class="icon animated bounce"></span>

[sarbbottam]

You need to use animation-play-state property.

.animatedhover {
  ...
  animation-play-state: paused;
}
.animatedhover:hover {
  animation-play-state: running;
}

[daneden]

Try removing the Animate.css classes from your element and give it this styling instead:

.icon:hover {
    -webkit-animation: bounce 1s;
    animation: bounce 1s;
}