Dừng hoạt ảnh và bắt đầu chuyển đổi khi di chuột

Question

Tôi có liên kết đang chạy hoạt ảnh vô hạn với màu nền. Tôi muốn dừng hoạt ảnh và chuyển sang màu nền khác khi di chuột.

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

Tại sao mã này không hoạt động? Và có cách nào khác để hoàn thành công việc này không? (tốt nhất là không có Javascript).

Answer 1

Hãy thử -webkit-animation: 0;. Demo here. 0 là giá trị mặc định cho animation hoặc những gì bạn phải đặt để tắt mọi hoạt ảnh CSS3 hiện có.

Answer 2

Tìm một cách khác để đạt được điều này.

Viết một chuỗi hình ảnh động khác và gọi nó trên di chuột của bạn.

.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-animation-play-state: dừng và -webkit-animation-play-state: chạy

Answer 4

Tôi có cùng một vấn đề và giải pháp tôi tìm thấy là như sau.

Tạo hoạt ảnh bạn muốn và cho phần tử bạn và mỗi phần gán cho mỗi một lớp khác nhau.

Sau đó, sử dụng .mouseover() hoặc .mouseenter() Chuyển đổi sự kiện jQuery giữa các lớp bạn đã gán cho từng hoạt ảnh.

Điều này tương tự như những gì bạn sử dụng cho trình đơn bánh burger, chỉ với một trình xử lý khác.