CSS3 中的过渡 —— transition

在 CSS3 中，我们可以利用 transition 实现元素从一种样式变换为另一种样式时添加动画效果。 通常和 :hover 一起搭配使用。

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

• 要过渡的属性：想要变化的 css 属性，宽度、高度、背景颜色、内外边距等。如果想要所有属性都有过渡，用 all。
• 花费时间：过渡动画的时间，单位是秒，必需写单位，比如 0.5s。
• 运动曲线：动画的速度曲线。值为 linear（匀速）、ease（逐渐慢下来）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）。可以缺省，默认为 ease。
• 何时开始：延时时间，单位是秒，必需写单位。可以缺省，默认是 0s。

  /*宽度过渡*/
  transition: width .5s ease;

  /*宽度、高度过渡，多个属性用逗号分隔*/
  transition: width .5s, height .5s;

  /*所有属性用 all*/
  transition: all .5s linear;