CSS3对过渡transition进行调速以及延时代码示例

本篇文章小编给大家分享一下CSS3对过渡transition进行调速以及延时代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

1、使用调速函数控制过渡效果的速度曲线（加速，减速等）

使用调速函数可以设置过渡效果的速度曲线，从而实现过渡效果随着时间来改变其速度。比如：开始很慢然后加速或者开始很快然后减速。

（1）CSS3定义了如下的调速函数：

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

（2）调速函数的使用

使用时只需要把调速函数跟在过渡属性的时间参数后面。如果不填的话则使用默认调速函数（ease）

css;">transition: opacity 10s ease-in-out;

（3）使用样例1：

下面通过样例演示各种调速函数的效果区别。鼠标移入方框，方框内的方块会向右移动，同时方块会旋转，边角变圆角，背景色和文字颜色也在改变。这些样式的改变都会有过渡效果，同时由于使用不同的调速函数，过渡的快慢也是有区别的。

    
    
    


    
ease
(default)
    
ease-in
    
ease-out
    
ease-in-out
   
    
linear

（4）使用样例2：

下面通过对柱状图的宽度改变过渡，演示不同调速函数的效果区别。

    
    
ease
(default)
    
ease-in
    
ease-out
    
ease-in-out
    
linear

2、为过渡增加延时

过渡属性还可以添加一个可选的延时，用以将过渡的开始推迟一段时间。下面是一个等待1秒的例子。

延时1秒

    
    
    

 
    
延时1秒