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?

Lamarckian

Or if someone knows a different way, without using javascript, if you give me a hint, I can work out the rest :) – Lamarckian

I'm not too familiar with CSS3 but I'm thinking that the only way to stop all the animations, in time while only changing the color of the currently hovered element's border is to use JS only. – Corrida

it would be better if u add some code... – Hygienist

@JTSmith - that's what I thought.... Thanks – Lamarckian

@lakshmi priya - that is my code above. That is the fading animation. – Lamarckian

Take a look at my updated answer and see if that's of any help. – Orang

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/

Orang

However I just noticed that I couldn't keep the animations in sync. – Orang

Keeping the animations in sync is the main reason I want to keep it going. Thanks for giving it a go. – Lamarckian

Wow... I can't believe I didn't think of that! Sometimes I think I try and be too complex. Thanks for that... – Lamarckian

Answer 2

Nowadays there's a nicer solution using custom-property fallback.

Inside the keyframe declaration, you set the animated values using a custom-property with a fallback value (the fallback value is the actual animation), but you only set a value to this custom-property when the element is being hovered.

It works because, when you apply a custom-property this way (with two values separated by a comma), the second one is applied if the first one isn't declared.

(I took the liberty of cleaning up some unnecessary code)

.border-strobe {
     border: 2px solid #000000;
     animation: border-strobe-animation 1.5s infinite ease-in-out;
}

@keyframes border-strobe-animation {
    0% {border-color: var(--color, #FF1d38);}
    50% {border-color: var(--color, #000000);}
    100% {border-color: var(--color, #FF1d38);}
}

.border-strobe:hover {
     --color: #FF1D38;
}

Agc