css3贝塞尔曲线(cubic-bezier)

访客4年前黑客文章733

css3 animation模块,其中animation-timing-function 和 transition-timing-function两个属性来控制动画速率划分提供了ease,liner,ease-in,ease-out,ease-in-out几个预设速率,还可以同过cubic-bezier来自界说速率,想要深入领会CSS3动画,实现为所欲为的动画效果,照样有需要明白下其中的原理。

CSS3动画速率的控制通过三次贝塞尔曲线函数实现,界说规则为 

cubic-bezier (x1,y1,x2,y2)


cubic-bezier又称三次贝塞尔,主要是为 animation 天生速率曲线的函数,划定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。 从下图中简要明白一下 cubic-bezier:



从上图我们需要知道的是 cubic-bezier 的取值局限: 

P0:默认值 (0, 0) 
P1:动态取值 (x1, y1) 
P2:动态取值 (x2, y2) 
P3:默认值 (1, 1)

我们需要关注的是 P1 和 P2 两点的取值,而其中 X 轴的取值局限是 0 到 1,当取值超出局限时 cubic-bezier 将失效;Y 轴的取值没有划定,固然也毋须过大。 形成P0到P3曲线就是贝塞尔曲线。 

一条直线放在局限只有 1 的坐标轴中,并从中心拿出两个点来拉扯(x1,y1,x2,y2),最后形成的曲线就是动画的速率曲线。

.animation {
    transition: all 2s cubic-bezier(.65,.13,.22,.88);
}


CSS3提供的几个预设速率: 

几个常用的固定值对应的 cubic-bezier 值以及速率曲线

1.ease   对应自界说cubic-bezier(.25,.01,.25,1),效果为先慢后快再慢;


2.linear   对应自界说cubic-bezier(0,0,1,1),效果为匀速直线; 


 3.ease-in  对应自界说cubic-bezier(.42,0,1,1),效果为先慢后快; 


 4.ease-out  对应自界说cubic-bezier(0,0,.58,1),效果为先快后慢; 


 5.ease-in-out   对应自界说cubic-bezier(.42,0,.58,1),效果为先慢后快再慢。 


往返缓冲效果:cubic-bezier(0.68, -0.55, 0.27, 1.55) 如下图  


思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

相关文章

搜索优化之网站SEO中锚文本的作用

近期也有很多的站长通过私聊的方式问我说在seo优化的过程中,你所说的加锚文本在优化中有什么作用呢?今天东德seo的小编特意的写了一篇关于在网站搜索优化中锚文本的一些作用,希望对大家能有帮助。 一、增...

知性是什么意思(知性美女是什么样子)

知性是什么意思(知性美女是什么样子)

从《夕阳天使》第一次看舒淇,就觉得她长得很特别,到今天为止,脸蛋好看的女明星太多了,但是能让人一直不腻的大概只有舒淇和汤唯。——by 狗仔001 头条号/心灵狗仔队 我见过舒淇最知性的样子是...

加拿大演员海登·克里斯滕森回归“星战大家族”

当年在《星战前传三部曲》里出演“达斯·维德”(Darth Vader)前身——安纳金·天行者(Anakin Skywalker)的加拿大演员海登·克里斯滕森(Hayd...

黑客防线灰鸽子(灰鸽子安防工程有限公司)

黑客防线灰鸽子(灰鸽子安防工程有限公司)

本文导读目录: 1、黑防灰鸽子和普通灰鸽子的有什么区别?用哪个好? 2、我的灰鸽子 之类的配置全是别人传的 有危险没? 3、找一款无毒灰鸽子~·没有绑任何后门和木马的~· 4、装灰鸽子软件...

想做好创业投资好项目,我们应该做到这几点!

在大家如今的社会发展之中啊,大家愈来愈多的一些年轻朋友们呢都是会挑选去自主创业都是会去在大家如今的那样的一种相对性相对稳定的社会发展之中去掌握好每一个机遇。伴随着互联网技术的迅速发展趋势,全球公共数据...

teatime咖啡月收入是多少?轻松赚钱盈利好项目

teatime咖啡月收入是多少?轻松赚钱盈利好项目

此刻的饮品行业成长繁荣迅速,出格是咖啡饮品,连年来咖啡饮品受到公共消费者的密切存眷,并且逐步的咖啡饮品成为公共消费者日常糊口傍边不行缺少的饮品。而且从整体的饮品行业市场上来看咖啡的成长前景长短常的辽阔...