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

   以下是代码演示

CSS3动画效果transition

以下是效果演示

CSS3动画效果transition

CSS3动画效果transition