看到不少网站的搜索框聚焦后都会展开（单边横向变长），一直很好奇是怎么写的，偶然间看到阮老师的 CSS动画简介
发现原理并不难，下面实现一个简单的 CSS 搜索框动画。
开始！
定义一个搜索框。
<input type="text" placeholder="搜一下"/>
指定搜索框的宽度。
input{
width: 100px;
}
我们可以把接下来的动画拆分成两个步骤：1. 瞬间变长，2. 有过渡地变长。
指定在聚焦（即鼠标点击搜索框时）时搜索框瞬间变成 200px。
input:focus{
width: 200px;
}
我们想让这个搜索框动态变长，要用到一个属性 Transition（过渡），s 表示秒。
input:focus{
width: 200px;
transition: 1s;
}
还可以用 ease-in：先慢后快，ease-out：先快后慢，来调整流畅性。
input:focus{
width: 200px;
transition: 1s ease-in;
}
在默认状态中加入 transition，作为失焦后的动画。
input{
width: 100px;
transition: 1s ease-in;
}
end
