How can I instantly stop a CSS animation on hover?

css

Solution

Because you are animating `opactiy`, you need to set it back to 100% or 1 when hovering over the element and make sure the `@keyframes` isn't running.

.blink:hover {
    background:red; 
    opacity: 1;
    -webkit-animation-name: none;
    /* should be set to 100% opacity as soon as the mouse enters the box; when the mouse exits the box, the original animation should resume. */
}

JSFiddle

Problem

I did a CSS animation consisting of fading an element in and out. I set up a fiddle here: http://jsfiddle.net/BX78D/ (webkit only) ``` @-webkit-keyframes blink { 0% {opacity:1;} 50% {opacity:0;} 100% {opacity:1;} } ``` That part was fine, but here's the part I need help with: When a user hovers over that element, I need the animation to stop and the element to be instantly set back to 100% opacity (with a new background color). Right now, I can only get it to change the background color while continuing the current opacity animation. Does anyone know how to do this? The solution must be a CSS-only solution. I can't use JS for this due to client rules. If it can't be done with CSS only, I will have to scrap the whole effect.

Original source