Proprietà animazione, problema con hover

[hiro06]

Salve gente, vi spiego subito il mio problema, ho realizzato un div che con proprietà di transizione si modifica nella larghezza e nel background al passaggio del mouse "hover".
Ora mi è venuta l'idea di far lampeggiare i bordi del div e per far questo ho usato le proprietà di animazione @-webkit-keyframes con border-color, fin qui tutto ok, ma il problema è che il div lampeggia anche dopo che si è modificato passandoci il mouse sopra; ecco io vorrei che l'effetto lampeggio ci sia solo quando non ci passo il mouse, in definitiva con l'hover deve sparire e tornare con colore nero, ma non riesco a capire come fare, ci provo anche mettendoci !important ma nulla.

So che è difficile da capire per questo vi allego un file zip cosi potete vedere il codice e l'effetto.
Spero possiate darmi una mano Grazie.
P.s. con firefox non so perchè non mi si vede il lampeggio, ho inserito il prefisso -moz- ma nulla, magari potete dirmi come risolvere anche questo enigma xd.

voto scala.zip

[hiro06]

Nessuno mi risponde?

[Prill]

prova creando una regola per lo stato hover del tuo div (.accenditiplease:hover) che abbia al suo interno

animation-play-state: paused;

coi vari prefissi proprietari (fra l'altro ricontrolla la tua animazione che con firefox non funziona)

[hiro06]

Ciao Prill, grazie della risposta.
La questione di firefox l'ho risolta, avevo dimenticato il -moz- su @keyframes. Ora grazie alla tua dritta inserendo animation-play-state: running; in .accenditiplease e animation-play-state: paused; in .accenditiplease:hover, il colore si blocca ma si blocca nel gradiente di colorazione che stava assumendo prima che ci passassi il mouse sopra, quindi se stava diventando giallo si blocca sul giallo idem col nero, io vorrei che rimanesse nero, ho provato inserendo in .accenditiplease:hover border-color: #000; ma nulla.

Rinvio il file modificato, spero possiate suggerirmi una soluzione.

[hiro06]

Nessuno riesce ad aiutarmi?