讓動畫懸停像過渡懸停

我想灰色變成綠色，然後旱廁時，我的元素是懸停，當鼠標走出元素：
如果我的元素是綠色轉到灰色
如果我的elemnt是水綠色然後灰色
更準確我想做轉換但是對於3種顏色
當我們使用轉換2色結果很大，當鼠標元件出現故障時，顏色變化漸變爲第一個像灰色但動畫時鼠標走出元素顏色非常快變灰
什麼是解決方案？讓動畫懸停像過渡懸停

這是我的代碼，但不工作。

@keyframes test { 
 
    0% { 
 
    background: gray; 
 
    } 
 
    50% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: aqua; 
 
    } 
 
} 
 
@keyframes test1 { 
 
    0% { 
 
    background: aqua; 
 
    } 
 
    50% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: gray; 
 
    } 
 
} 
 
.one { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 50px auto; 
 
    background: gray; 
 
    animation: test1 2s; 
 
} 
 
.one:hover { 
 
    animation: test 2s alternate; 
 
    animation-fill-mode: forwards; 
 
}

<div class="one"></div>

來源

2015-07-03 mahyar

你介意使用額外的元素嗎？所以你可以讓外部元素從灰色變成綠色，內部元素從綠色變成藍色？ – BillyNate

你可以使用一個:before僞元素覆蓋的背景。如果您將元素的不透明度設置爲默認值0，並將其設置爲:hover，則可以使用transition-delay在完成第一次轉換時顯示第二次轉換。通過覆蓋:hover上的transition-delay，您可以確保「mouseleave」也正常工作。

像這樣（在FireFox只測試）：

.one { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 50px auto; 
 
    background-color: gray; 
 
    transition: background-color 1s linear 1s; 
 
} 
 
.one:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; right: 0; bottom: 0; left: 0; 
 
    background-color: aqua; 
 
    opacity: 0; 
 
    transition: opacity 1s linear; 
 
} 
 
.one:hover { 
 
    background-color: green; 
 
    transition-delay: 0s; 
 
} 
 
.one:hover:before { 
 
    opacity: 1; 
 
    transition-delay: 1s; 
 
}

<div class="one"></div>

來源

2015-07-06 11:34:58 BillyNate

tnx用於解答其非常智能的解決方案 – mahyar

謝謝。我假設你不介意[接受答案]（http://stackoverflow.com/help/someone-answers）？ – BillyNate

可以設置背景的梯度和動畫梯度位置

.test { 
 
    width: 300px; 
 
    height: 200px; 
 
    background-size: 90000px 100%; 
 
    background-image: linear-gradient(90deg, gray, green, aqua); 
 
    background-position: 0% 0%; 
 
    transition: background-position 2s; 
 
} 
 
.test:hover { 
 
    background-position: 100% 0%; 
 
    
 
}

<div class="test"></div>

來源

2015-07-09 18:16:21 vals

讓動畫懸停像過渡懸停

回答

相關問題