Interrompe l'animazione e avvia la transizione su hover

Question

Ho un collegamento che esegue un'animazione infinita con il colore di sfondo. Voglio interrompere l'animazione e la transizione in un colore di sfondo diverso al passaggio del mouse.

.startlink{ 
    background-color:#206a9e; 
    color:#fff; 
    border-radius:15px; 
    font-family: 'Myriad Pro'; 
    -webkit-animation:changeColor 3.4s infinite; 
    -webkit-transition:all 0.2s ease-in; 
} 

.startlink:hover{ 
    -webkit-animation-play-state: paused; 
    background-color: #014a2a; 
} 

@-webkit-keyframes changeColor 
{ 
    0% {background:#206a9e;} 
    50% {background:#012c4a;} 
    100% {background:#206a9e;} 
} 

Perché questo codice non funziona? E c'è un modo alternativo per fare questo? (preferibilmente senza Javascript).

Answer 1

Prova -webkit-animation: 0;. Demo here. 0 è il valore predefinito per animation o cosa è necessario impostare per disabilitare eventuali animazioni CSS3 esistenti.

Answer 2

Trovato un altro modo per raggiungere questo obiettivo.

Scrivi un'altra sequenza di fotogrammi chiave dell'animazione e chiamala sul tuo hover.

.startlink{ 
background-color:#206a9e; 
color:#fff; 
border-radius:15px; 
font-family: 'Myriad Pro'; 
-webkit-animation:changeColor 3.4s infinite; 
-webkit-transition:all 0.2s ease-in; 
} 

.startlink:hover{ 
-webkit-animation:hoverColor infinite; 
} 

@-webkit-keyframes changeColor 
{ 
0% {background:#206a9e;} 
50% {background:#012c4a;} 
100% {background:#206a9e;} 
} 
@-webkit-keyframes hoverColor 
{ 
background: #014a2a; 
} 

Answer 3

-webkit-animazione-play-Stato: pausa e -webkit-animazione-play-Stato: esecuzione

Answer 4

Ho lo stesso problema e la soluzione che ho trovato è il seguente.

Creare l'animazione desiderata e per l'elemento e assegnare a ciascuna una classe diversa.

Quindi utilizzare .mouseover() o .mouseenter() Gli eventi jQuery alternano le classi assegnate a ciascuna animazione.

È simile a quello che si utilizza per un menu di hamburger, solo con un gestore diverso.