CSS3过渡 transition

一、animation 过渡

过渡( transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash动画或Javascript I的情況下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：从一个状态过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持(ie9以下版本)但是不会影响页面布局。

现在大多数经常 搭配 :hover 一起使用。

1.1 语法

transition:要过渡的属性 花费时间 运动曲线 何时开始；

注意： 谁做过渡给谁加

1. 属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都
   变化过渡，写一个al就可以。
2. 花费时间：单位是秒（必须写单位）比如0.5s
3. 运动曲线：默认是ease（可以省略）
4. 何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s（可以省略）
   

1.2 多个属性值

当有多个属性值需要过渡的时候，该怎么写呢?

利用逗号分割就可以了。

div {
  height: 100px;
  width: 100px;
  background-color: teal;
  /* transition:变化的属性 花费的时间 运动曲线 何时开始 */
  transition: width 1s,height 1s;
}
div:hover{
  width: 400px;
  height: 200px;
}

或者：

transition:all 1s;