css - 用 :hover 覆盖动画

Question

我有以下 CSS 动画:

.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;}
}

基本上，我想做的是:

• 例如，在悬停时(.border-strobe:hover)，我想将边框颜色更改为#FF1D38。

• 一旦我离开悬停，我只想让动画按正常过程运行。

但是，问题是我在页面上有一些类 .border-strobe 的元素，我想及时保留它们。

是否有一种简单的方法可以使用悬停覆盖边框颜色并使动画彼此保持一致，或者目前无法做到这一点？

这有意义吗？

Answer 1

您是否有理由让动画继续正常运行？

如果您想要的悬停颜色与动画的开始和结束颜色相同，为什么不在悬停类中定义边框颜色的同时终止悬停动画？

这是我能得到的最接近的值:http://jsfiddle.net/xsjJy/

更新

我不敢相信我以前没想到!如果您愿意更改 HTML，您可以放入一个 mask 范围(或 div 或任何您想要的)，当您将鼠标悬停在 border-strobe 上时，只需更改边框即可。

这是 jsFiddle 更新:http://jsfiddle.net/xsjJy/2/