Как сделать «непринужденность» при потере фокуса в CSS

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


EDIT:
Теперь я знаю, как это сделать! Так тины была я должен был поставить переход в 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

Простой, добавить легкость вы на вашем: фокус ввода на обычном входе в вашем 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;} 

работает скрипка: https://jsfiddle.net/0bzts2ua/2/