为什么当我取消焦点输入时，CSS3转换不工作?(重点)

Question

这是我的CSS:

.light .contact_form_widget input:focus,.light .contact_form_widget textarea:focus,.light #commentform input:focus,.light #commentform textarea:focus,.light #contactform input:focus,.light #contactform textarea:focus{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
-webkit-backface-visibility:hidden
}

为什么当我取消对输入或文本区域的聚焦时，这个CSS转换不工作?该过渡适用于链接，图像悬停叠加…

[我删除了链接，不需要的问题，它只是一个例子]。

编辑:这是CSS的另一部分(我之前没有发布，我不知道为什么，可能是太明显了):

.light .contact_form_widget input:focus,.light .contact_form_widget textarea:focus,.light #commentform input:focus,.light #commentform textarea:focus,.light #contactform input:focus,.light #contactform textarea:focus{
background:#FFF;border:1px solid #BBB;
box-shadow:inset 0 0 5px rgba(0,0,0,0.13);
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.13);
-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.13)
}

Answer 1

尝试这样的演示

CSS:

input[type=text]{
    background-color: #f2f2f2;
    border:1px solid #ccc;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out
}
input[type=text]:focus {
    border-color: #777;
    color: #000;
    background: #fff;
    outline: 0
}

你需要给正常状态的动画，而不是焦点