transition-timing-function属性(CSS设置)

发布时间：2021-11-23 10:45 所属分类：热门主题浏览次数：

　　transition-timing-function属性

　　作用：界说从开端到完毕进程的过渡作用

　　复合写法：transition:应用特点过度进程时刻过度作用过度作用开端时刻;

　　作用总结：

　　linear线性速度，和一条直线一样，开端到完毕都是一样的速度，不快不慢，比较单一

　　示例：

　　提示：能够用逗号“，”分隔，为每个特点界说单独的作用

　　2.ease开端慢中心加速完毕慢，作用便是缓慢的进入中心快速的走缓慢出去

　　示例：

　　3.ease-out开端快，完毕慢,和单词一个意思：缓慢ease出去out，然后开端的时分快

　　4.ease-in开端慢，完毕快,和单词一个意思：缓慢ease进入in，然后完毕的时分快

　　5.ease-in-out开端和完毕都是慢速,和单词一个意思：ease缓慢，in进入，out出去，所以便是缓慢缓出

　　回忆技巧：

　　ease缓慢(速度)

　　in进入（开端）

　　out出去（完毕)

　　来听个故事：

　　一个商铺有两扇门，正门和后门，从正门进入到后门出去中心有一段旅程，如果是叫ease的人那么便是渐渐的走入正门，中心那段旅程加速，在出后门的时分却渐渐的走，记住这些满足想起了日后。

　　示例用法：

　　提示：也可认为特定布景位置指定过度

　　cubic-bezier贝塞尔曲线函数，一般用不到，上面的就够用了,

　　cubic-bezier()一共有四个值，分别以逗号隔开（，）x轴值只能是0至1之间的数值,Y轴的取值没有规定,分别是(x1,y1,x2,y2)因为他是一条曲线所以最初是一个坐标点x1+y1，完毕头是一个坐标点所以x2+y2;doyougetit?

　　注意：咱们实际指定的值操控的是这个小触点

　　默许左面和右边是各有一个默许初始点的，比方下图左面黑色的点初始坐标便是x=0,y=0,而完毕初始坐标则是x=1,y=1,所以总共是4个其实，但咱们能操控的仅仅2个点

　　示例写法：cubic-bezier(0.42,0,0.58,1)

　　上面是写在一起的写法，引自一遍文章，能够分隔指定，感兴趣的也能够看看这篇：https://www.cnblogs.com/afighter/p/5731293.html

　　CSS设置

　　一、语法

　　transition:propertydurationtiming-functiondelay

　　transition特点是个复合特点，她包含以下几个子特点：

　　transition-property：规则设置过渡作用的css特点称号

　　transition-duration：规则完结过渡作用需要多少秒或毫秒

　　transition-timing-function：指定过渡函数，规则速度作用的速度曲线

　　transition-delay：指定开端出现的延迟时刻

　　默认值分别为：all0ease0

　　注：transition-duration时长为0，不会产生过渡作用

　　改动多个css特点的过渡作用时：

　　a{transition:background0.8sease-in0.3s,color0.6sease-out0.3s;}

　　二、子特点

　　transition-property

　　transition-property:none|all|property;

　　值为none时，没有特点会取得过渡作用，值为all时，一切特点都将取得过渡作用，值为指定的css特点使用过渡作用，多个特点用逗号隔开

　　transition-duration

　　transition-duration：time;

　　该特点首要用来设置一个特点过渡到另一个特点所需的时刻，也便是从旧特点过渡到新特点花费的时刻长度，俗称持续时刻

　　transition-timing-function

　　该特点指的是过渡的“缓动函数”。首要用来指定浏览器的过渡速度，以及过渡期间的操作进展状况，解释下：

　　注意：值cubic-bezier(n,n,n,n)能够中界说自己的值，如cubic-bezier(0.42,0,0.58,1)

　　div{width:100px;height:100px;background-color:orange;margin:20pxauto;border-radius:100%;-webkit-transition-property:-webkit-border-radius;transition-property:border-radius;-webkit-transition-duration:3s;transition-duration:3s;-webkit-transition-timing-function：ease;

　　transition-timing-function：ease;

　　div:hover{

　　border-radius:0px;

　　}

　　我试着换不同的值看看区别，但并不是很明显，把持续时刻弄长点估计更能看出，可是因为gif太大怕传不上来所以就弄了3秒的时刻。

　　ease:由快到慢到更慢

　　linear:恒速

　　ease-in:越来越快

　　ease-out:越来越慢

　　ease-in-out:先加速后减速

　　transition-delay

　　这个特点没什么说的了，便是过渡作用开端前的延迟时刻，单位秒或许毫秒

　　再来个栗子：

　　div{width:200px;height:200px;background:red;margin:20pxauto;-webkit-transition-property:background;transition-property:background;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-delay:.18s;transition-delay:.18s;

　　}div:hover{background:#000;

　　}