Переопределить анимацию с помощью :hover

У меня есть следующая анимация 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, и я хочу сохранить их во времени.

Есть ли простой способ переопределить цвет границы с помощью наведения и сохранить согласованность анимаций друг с другом, или в настоящее время это невозможно сделать?

Имеет ли это смысл?

8
задан Cody Gray 4 May 2012 в 07:56
поделиться