CSS3 transition动画的属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
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 同时设置四个属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
单纯看上面的参数可能不太理解，下面来写个div的动画变化示例来看看。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
先写一个div文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
再写一个hover事件，当鼠标移动上去的时候，设置
with:500px文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
写了hover事件之后，鼠标只要移动上去，div立即就变长了。然后鼠标移开，div立即变回去。
这个过程非常快，没有任何过渡的感觉。那么能否写个过渡的感觉出来呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
transition: property duration 先用动画的前两个参数设置动作时长文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
设置动作为 width 变化宽度，时长为1秒，此时鼠标移动上去就会缓慢在1秒内完成500px的扩展，而不会立即变化过去。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
而这个缓慢移动的过程是可以控制的。下面来看看第三个参数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
transition: property duration timing-function文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
然后还可以加上延时的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
transition: property duration timing-function delay文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
transition-delay 设置动画的延迟文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
最后，还可以写多个动作同时动画文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
编写height同时动画文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
再加上背景色变化的动画文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
综合练习：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
制作鼠标移入图片时，图片说明滑入的效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
编写基本显示如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
设置一下文字部分的透明度以及字体颜色文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
编写margin-top的动画效果，达到滑入的效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11248.html