animacja Zastąp z: hover

Question

Mam następujący animacji 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;} 
} 

Zasadniczo co chcę zrobić to:

• przy aktywowaniu (tak .border-strobe:hover) na przykład, chcę zmienić kolor obramowania do #FF1D38.

• Po zejściu z zawisu chcę po prostu pozwolić animacji na jej normalny przebieg.

Problem polega jednak na tym, że mam kilka elementów na stronach z klasą .border-strobe i chcę je zachować na czas.

Czy istnieje prosty sposób na przesłonięcie koloru obramowania za pomocą wskaźnika i utrzymanie animacji spójnych ze sobą, lub czy obecnie nie jest to możliwe?

Czy to ma sens?

Answer 1

Czy istnieje powód, dla którego chcesz, aby animacja kontynuowała swój normalny przebieg?

Jeśli pożądany kolor wskaźnika jest taki sam jak początek i koniec animacji, to dlaczego nie można uaktywnić animacji po najechaniu kursorem, gdy zdefiniowany jest kolor obramowania w klasie hover?

Oto najbliżej mogę dostać: http://jsfiddle.net/xsjJy/

UPDATE

Nie mogę uwierzyć, że nie myśleć o tym wcześniej! Jeśli chcesz zmienić kod HTML, możesz rzucić zakres maski (lub div lub cokolwiek chcesz) i po prostu zmienić granicę po najechaniu kursorem myszy na obramowanie.

Oto aktualizacja jsFiddle: http://jsfiddle.net/xsjJy/2/