为什么当我取消输入焦点时,这个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
}

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