样式过渡

概念

过渡-transition，时CSS3中具有颠覆性的特征之一，我们可以在不适用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一个样式时为元素添加效果。
过度动画：是从一个状态 渐渐地过渡到另一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（IE9以下版本）但是不会印象页面布局，并且经常和hover一起搭配使用。

属性

想要变化的CSS属性，宽度高度 背景颜色 内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以。

花费时间

单位是秒（必须写单位） 比如 0.5s

运动曲线

默认是ease（可以省略）

何时开始

单位是秒（必须写单位）可以设置延迟触发事件 默认是0s（可以省略）

案例

div {
  width: 200px;
  height: 100px;
  background-color: pink;
  transition: width 1s .5s;
}
div:hover {
  width: 400px;
}

注意

• 多个过渡用all
• 谁做过渡给谁加