CSS3动画效果transition

     经过几天逆战班学习，学习到了不少知识，今天来和大家分享一个关于CSS动画效果体现的属性“transition”。

     transition名为过渡，指的是在CSS动画效果发生的一些变化，包括动画效果发生所需要的时间、速度曲线等。transition语法包括以下几类：

1. transition-property:规定设置过渡效果的CSS属性名称。例如：transition-property:width;表示指定CSS属性名称为width,则只会在宽度上发生过过渡效果。默认值为all。
2. transition-duration:规定完成过渡效果需要多少秒或毫秒。例如：transition-duration:2s;表示完成过渡效果需要2s。
3. transition-delay:定义过渡效果何时开始。例如：transition-delay:1s;表示过渡效果从发出指令1s后开始执行。该语法也可被称为过渡延时时间。
4. transition-timing-function:规定速度效果的速度曲线（运动形式）。属性值包括：linear匀速、ease(默认值）逐渐慢下来、ease-in加速、ease-out加速、ease-in-out先加速后减速、cubic-bezier贝塞尔曲线（自定义曲线）。

      transition属性也有复合写法,当该复合写法只有一个时间属性时，没有顺序前后之分。当完成过渡总时间和过渡延时时间同时存在时，两个数值中，前面的为过渡总时间，后面的使过度延时时间。

   以下是代码演示

以下是效果演示