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

尝试这样 Demo

<强> 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
}

您需要为正常状态提供动画而不是焦点