一、过渡（CSS3）
1、过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
2、过渡动画：是从一个状态渐渐的过渡到另外一个状态。
3、可以让我们的页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本），但是不会影响页面布局。
4、我们现在经常和 :hover 一起搭配使用。
5、语法格式：
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
6、
| 属性 | 描述 | CSS |
| transition | 简写属性，用于在一个属性中设置四个过渡属性 | 3 |
| transition-property | 规定应用过渡的CSS属性的名称 | 3 |
| transition-duration | 定义过渡效果花费的时间，默认是0 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线，默认是“ease” | 3 |
| transition-delay | 规定过渡效果何时开始，默认是0 | 3 |
7、属性
属性就是你想要变化的css属性，宽度高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡，写一个 all 就可以了。
8、花费时间
transition-duration 花费时间 单位是 秒 （必须写单位）s ms 比如0.5s，这个s单位必须写，ms毫秒
9、运动曲线，默认是 ease
运动曲线示意图：
10、何时开始
默认是0s，鼠标触发就立即出发，可以设置延迟触发时间
二、获得焦点元素
1、:focus 伪类选择器用于选取获得焦点的元素，这里主要针对的是表单元素
:hover
2、语法
input {
border: 1px solid #ccc;
height: 30px;
width: 40px;
transition: all .5s;
}
input:focus {
width: 80px;
border: 1px solid red;
}