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

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

您需要使用缓入缓出。请参阅: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;
}