让动画悬停像过渡悬停

我想灰色变成绿色，然后旱厕时，我的元素是悬停，当鼠标走出元素：
如果我的元素是绿色转到灰色
如果我的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

让动画悬停像过渡悬停

回答

相关问题