CSS3 transition动画

仅供学习，转载请注明出处

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的动画效果，达到滑入的效果