html - 如何在 CSS 中使 'ease out' 失去焦点

Question

今天，当我要设计我的注册表单时，我发现了一些看起来不太好的东西。我做了一个ease in当<input>被选中，但是当他们取消选择 <input> 时标记它只是恢复正常。这看起来非常丑陋!

所以我的问题是如何制作 CSS OnFocusLoss ease out 的脚本按宽度？
这是我目前的脚本演示:JS Fiddle: TechnicalCoder/ease.css .

input[type=text] {width:150px;height:50px;border: 2px solid;border-color: #e6e6e6;border-radius: 5px;color: #cccccc;padding: 3px;font-size: 30px;}
input[type=text]:focus {-webkit-transition: all .5s ease;-moz-transition: all .5s ease;transition: all .5s ease;width:700px;}

现在，如果您输入此链接，然后单击输入字段，您将看到它缓入...但是如果您单击页面上的其他位置，它会立即返回... .
我怎样才能让它向后缓和？？？

感谢您花时间帮助我..
TechnicalCoder


编辑:
现在我知道该怎么做了!所以我不得不把过渡变成input[type=text]然后它缓和回来，这是一个例子:

input[type=text], input[type=password], input[type=email] {width:150px;height:50px;border: 2px solid;border-color: #e6e6e6;border-radius: 5px;color: #cccccc;padding: 3px;font-size: 30px;font-family: SansaRegular;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;transition: all .5s ease;}
input[type=text]:focus {-webkit-transition: all .5s ease;-moz-transition: all .5s ease;transition: all .5s ease;width:700px;}

您可以在此处找到此脚本:JS Fiddle: TechnicalCoder/ease.css?update .

感谢所有帮助!
祝你有美好的一天!

TechnicalCoder

Answer 1

很简单，将您在 :focus 输入上的轻松添加到您的 css 中的普通输入上:

input[type=text] {width:150px;height:50px;border: 2px solid;border-color: #e6e6e6;border-radius: 5px;color: #cccccc;padding: 3px;font-size: 30px; -webkit-transition: all .5s ease;-moz-transition: all .5s ease;transition: all .5s ease;}

input[type=text]:focus {-webkit-transition: all .5s ease;-moz-transition: all .5s ease;transition: all .5s ease;width:700px;}

工作 fiddle : https://jsfiddle.net/0bzts2ua/2/