用 :hover 覆盖动画答案

【问题标题】：Override animation with :hover用 :hover 覆盖动画
【发布时间】：2012-05-07 06:01:08
【问题描述】：

我有以下 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 类，我想及时保留它们。

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

这有意义吗？

【问题讨论】：

或者如果有人知道不同的方式，不使用javascript，如果你给我一个提示，我可以解决剩下的:)
我对 CSS3 不太熟悉，但我认为及时停止所有动画的唯一方法，同时只改变当前悬停元素边框的颜色 是 i> 仅使用 JS。
如果你添加一些代码会更好......
@JTSmith - 我就是这么想的......谢谢
@lakshmi priya - 这是我上面的代码。那就是渐变动画。

标签： css css-animations

【解决方案1】：

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

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

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

更新

我不敢相信我之前没想到！如果您愿意更改 HTML，您可以输入一个掩码跨度（或 div 或任何您想要的），然后当您将鼠标悬停在边框选通上时更改边框。

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

【讨论】：

但是我刚刚注意到我无法让动画保持同步。
保持动画同步是我想要让它继续下去的主要原因。感谢您试一试。
哇...我不敢相信我没想到！有时我觉得我尝试变得过于复杂。谢谢你...