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)

transition: opacity 10s ease-in-out;

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



    
    hangge.com
    


    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秒



    
    hangge.com
    

 
    
延时1秒

以上是“CSS3对过渡transition进行调速以及延时的示例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


新闻名称:CSS3对过渡transition进行调速以及延时的示例
文章URL:http://myzitong.com/article/ppjseo.html

其他资讯