8

我有以下 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;}
}

基本上，我想做的是：

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

• 一旦我离开悬停，我想简单地让动画运行它的正常进程。

然而，问题是我的课程页面上有一些元素.border-strobe，我想及时保留它们。

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

那有意义吗？

4

1 回答 1

7

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

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

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

更新

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

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

于 2012-05-04T18:18:08.140 回答