停止動畫並在懸停時啓動轉換

我有一個鏈接運行帶有背景顏色的無限動畫。我想停止動畫，並在懸停時轉換爲不同的背景顏色。停止動畫並在懸停時啓動轉換

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

爲什麼這段代碼不工作？是否有另外一種方法來完成這項工作？（最好不用Javascript）。

來源

2013-04-12 Sidharth Raja

嘗試-webkit-animation: 0;。 Demo here。 0是animation的默認值或您必須設置爲禁用任何現有CSS3動畫的默認值。

來源

2013-04-12 04:24:38 Rishabh

在這種情況下，懸停時沒有動畫 – Novelist

OP想要停止動畫並將其轉換爲**不同的背景顏色，這正是我的測試用例所完成的功能:)它將轉換爲綠色！ – Rishabh

對不起。 0.2秒太少了:)我已經嘗試在你的演示中設置爲1秒，是的，它有一個動畫 – Novelist

找到另一種方式來實現這一點。

編寫另一個動畫關鍵幀序列並在您的懸停上調用它。

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

來源

2013-04-12 04:28:33 Neeraj

-webkit-動畫播放狀態：暫停和 -webkit-動畫播放狀態：運行

來源

2014-02-07 19:23:12 arturmoroz

感謝您的嘗試，但不回答問題。懸停時，我們希望*從當前動畫狀態轉換到其他狀態。 – colllin

我有同樣的問題，我找到了解決辦法如下。

創建你想要的動畫，併爲每個元素指定一個不同的類。

然後使用.mouseover()或.mouseenter() jQuery事件在您分配給每個動畫的類之間切換。

它與您使用的漢堡菜單類似，只是使用不同的處理程序。

來源

2016-04-05 00:03:33

停止動畫並在懸停時啓動轉換

回答

相關問題