Aufschalten Animation mit: schweben

Question

Ich habe folgende CSS-Animation:

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

Im Grunde, was ich tun möchte, ist:

• Auf schweben (so .border-strobe:hover) zum Beispiel, ich will das ändern Randfarbe zu #FF1D38.

• Sobald ich den Hover verliere, möchte ich die Animation einfach normal laufen lassen.

Das Problem jedoch ist, dass ich ein paar Elemente auf den Seiten mit der Klasse .border-strobe habe und ich möchte sie in der Zeit halten.

Gibt es eine einfache Möglichkeit, die Rahmenfarbe mit Hover zu überschreiben und die Animationen konsistent zu halten, oder ist es derzeit nicht möglich, dies zu tun?

Macht das Sinn?

Answer 1

Gibt es einen Grund, warum Sie die Animation normal weiterlaufen lassen möchten?

Wenn Ihre Hover-Farbe der Anfang und das Ende der Animation ist, warum töten Sie die Animation nicht bei Hover, während die Rahmenfarbe in der Hover-Klasse definiert ist?

Hier ist die nächste, die ich bekommen konnte: http://jsfiddle.net/xsjJy/

UPDATE

ich nicht glauben kann ich nicht früher daran denken haben! Wenn Sie bereit sind, den HTML-Code zu ändern, können Sie einen Maskenbereich (oder div oder was auch immer Sie wollen) einfügen, und den Rahmen ändern, wenn Sie den Mauszeiger über den Rahmen bewegen.

Hier ist die jsFiddle Update: http://jsfiddle.net/xsjJy/2/