Zatrzymaj animację i rozpocznij przejście po najechaniu myszą

Question

Mam link, który uruchamia nieskończoną animację z kolorem tła. Chcę zatrzymać animację i przejść na inny kolor tła po najechaniu myszą.

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

Dlaczego ten kod nie działa? Czy istnieje alternatywny sposób na zrobienie tego? (najlepiej bez Javascript).

Answer 1

Wypróbuj . Demo here. 0 to domyślna wartość dla animation lub to, co musisz ustawić, aby wyłączyć wszelkie istniejące animacje CSS3.

Answer 2

Znaleziono inny sposób, aby to osiągnąć.

Napisz kolejną sekwencję klatek kluczowych animacji i wywołaj ją na swoim dymku.

.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-animacja-play-stan: wstrzymana i -webkit-animacja-play-state: bieganie

Answer 4

Mam ten sam problem i rozwiązanie znalazłem jest następujący.

Utwórz żądaną animację i element, który ty i każda z nich przypisz do innej klasy.

Następnie użyj .mouseover() lub .mouseenter() zdarzeń jQuery, przełączając między klasami przypisanymi do każdej animacji.

Jest podobny do tego, którego używasz do menu burgera, tylko z innym uchwytem.