How can I instantly stop a CSS animation on hover?

Question

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.

Answer 1

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

Answer 2

Just override the -webkit-animation-name to none

inside the :hover css part write:

-webkit-animation-name: none;

FIDDLE