CSS 输入框动画设置
输入框动画设置
CSS中，可以使用transition属性来设置输入框的动画效果，比如当点击输入框获取焦点时和失去焦点时，input定义的输入框的长度为变化，比如下方法的这个输入框，可以点击试一试：
语法
设置输入框动画的CSS需要两个样式，分别是input常态下的和Input获取焦点时的CSS样式：
input{transition:property duration timing-function delay}，以及input:focus{property}
transition属性值
| 属性值 | 描述 |
|---|---|
| property | 指定过渡效果的CSS属性 |
| duration | 指定过渡时长，单位可以是秒或毫秒 |
| timing=function | 指定过渡效果的速度曲线 |
| delay | 指定过渡效果什么时候开始 |
输入框动画设置实例代码，及在线编辑器
<input id='in2' type='text'>
<style>
#in2{transition:width 0.5s ease-in-out;height:35px;border-radius:5px;}
#in2:focus{width:100%;outline:none;}
</style>