How can I instantly stop a CSS animation on hover?

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