css - 我的 CSS3 没有在我的按钮上淡出

Question

在我的网站上，我为我的提交按钮使用了 CSS3 悬停淡入淡出。它在悬停时正确淡入淡出，但是当我从按钮上移除光标时，它会迅速变回原始颜色，它似乎并没有在 1 秒内淡出。

.form-wrapper input[type=submit] {background-color:#0076A9}

.form-wrapper input[type=submit]:hover{
    background-color:#7daed3; 
    -webkit-transition-duration:1s; 
    -webkit-transition-timing-function:ease}

更新：

.social-links {
color:#0076A9;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease;}

.social-links:hover {
color:#7daed3;}

Answer 1

将 设置为-webkit-transition-duration:1s;没有悬停在 CSS 中的输入，如下所示：

.form-wrapper input[type=submit] {
    background-color:#0076A9;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:ease;
}
.form-wrapper input[type=submit]:hover {
    background-color:#7daed3;
}

现场示例：http: //jsfiddle.net/YgWYh/

Answer 2

你需要使用ease-in-out. 见：http ://css3generator.com/

-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;

对于影响所有属性的过渡，请使用（用于社交链接）：

.social-links a{
    display: inline-block;
    width: 43px;
    height: 43px;
    margin: 0 10px 10px 0;
    color: #0076a9;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}