仅供学习，转载请注明出处
CSS3 transition动画
1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性
单纯看上面的参数可能不太理解，下面来写个div的动画变化示例来看看。
先写一个div
再写一个hover事件，当鼠标移动上去的时候，设置with:500px
写了hover事件之后，鼠标只要移动上去，div立即就变长了。然后鼠标移开，div立即变回去。
这个过程非常快，没有任何过渡的感觉。那么能否写个过渡的感觉出来呢？
transition: property duration 先用动画的前两个参数设置动作时长
设置动作为 width 变化宽度，时长为1秒，此时鼠标移动上去就会缓慢在1秒内完成500px的扩展，而不会立即变化过去。
而这个缓慢移动的过程是可以控制的。下面来看看第三个参数。
transition: property duration timing-function
transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
然后还可以加上延时的效果。
transition: property duration timing-function delay
transition-delay 设置动画的延迟
最后，还可以写多个动作同时动画
编写height同时动画
再加上背景色变化的动画
综合练习：
制作鼠标移入图片时，图片说明滑入的效果
编写基本显示如下：
设置一下文字部分的透明度以及字体颜色
编写margin-top的动画效果，达到滑入的效果
微信公众号
