为什么当我取消输入焦点时,这个CSS3过渡不起作用？ (：焦点)

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

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
}

您需要为焦点提供正常状态的动画