CSS动画特效三剑客之 transition (过渡)
css动画特效分为三个大类：动画() 过渡() 变形/转换(transition)
其中过渡是属于轻型的动画，过渡常使用变形的基本操作。
什么是CSS3 过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
1、指定要添加效果的CSS属性
2、指定效果的持续时间。
过渡经常跟鼠标悬浮一起配合使用，比如当鼠标经过某个元素，这个元素发生了变化。
div
{
width: 100px;
height: 100px;
transition: all 2s;
}
div:hover
{
width:300px;
height: 300px;
}
不加transition，鼠标经过元素会很突兀的变化，加了之后就有一个过渡效果。
transition属性
可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。属性有两个临界值all和none，基本都使用all，表示所有属性
transition: margin-right 2s, color 1s;
transition是一个简写形式，完整语法如下
transition : transition-property transition-duration transition-timing-function transition-delay
transition-property 属性
想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。
transition-duration 花费时间
单位是 秒（必须写单位） 比如 0.5s
transition-timing-function 运动曲线（可以省略）
默认是 ease 逐渐慢下来，linear 匀速，ease-in 加速，ease-out 减速，ease-in-out 先加速后减速
transition-delay 何时开始 （可以省略）
单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s
