Question

在my site我使用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;设置为输入而不在hss中悬停，如下所示：

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

我的CSS3并没有淡出我的按钮

2 个答案: