Override animation with :hover

Question

I have the following CSS animation:

.border-strobe {
     -webkit-animation: border-strobe-animation 1.5s infinite ease-in-out;
}

@-webkit-keyframes border-strobe-animation {
    0% {border:2px solid #FF1d38;}
    50% {border:2px solid #000000;}
    100% {border:2px solid #FF1d38;}
}

Basically, what I want to do is:

• On hover (so .border-strobe:hover) for example, I want to change the border colour to #FF1D38.

• Once I move off the hover, I want to simply let the animation run it's normal course.

The problem however, is that I have a few elements on the pages with the class .border-strobe and I want to keep them in time.

Is there a simple way to override the border colour using hover and keep the animations consistent with each other, or is it currently not possible to do this?

Does that make sense?

Answer 1

Is there a reason why you want to let the animation continue running its normal course?

If your hover color you want is the same as the animation's beginning and end, why don't you kill the animation on hover while having the border color being defined in the hover class?

Here's the closest I could get: http://jsfiddle.net/xsjJy/

UPDATE

I can't believe I didn't think of it before! If you're willing to alter the HTML, you can throw in a mask span (or div or whatever you want), and just have that change the border when you hover over the border-strobe.

Here's the jsFiddle update: http://jsfiddle.net/xsjJy/2/