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

　　transition-timing-function属性

功能：定义流程从头到尾的过渡功能。

复合写作：transition:应用程序特点处理时间过长，动作过多，动作开始时间过长；

角色摘要：

线性线速度就像直线一样，从头到尾都是同一个速度，既不快也不慢，相对简单。

示例：

提示：可以用逗号“，”分隔，为每个功能定义单独的功能。

2 .安逸起步慢，中心加速慢，作用是慢慢进入中心，走得快，出得慢。

示例：

3.放松开始得快，结束得慢，意思和单词一样：慢3 .放松，然后快速开始。

4 .轻松进入开始很慢，结束很快，意思和单词一样：慢慢轻松进入，然后很快结束。

5.ease-in-out开始和结束都很慢，意思和这个词是一样的：ease是慢的，in进入，out出去，所以是慢的，慢的。

记忆技能：

安逸是缓慢的(速度)

输入(开始)

输出(已完成)

听一个故事：

商店有两扇门，前门和后门。从前门到后门，有一段走出中心的路程。如果是安逸，会逐渐进入前门，中间的路程会加速，但从后门出来会逐渐走。记住这种满足感，想想未来。

示例用法：

提示：也可以认为是具体的景物位置指定过度。

三次Bezier-Bezier曲线函数一般不用，但上面一个就够了。

三次贝塞尔曲线()有四个用逗号分隔的值。(，)X轴的值只能是0到1之间的值，Y轴的值不指定。它们是(x1，y1，x2，y2)。因为是曲线，所以本来是坐标点x1 y1，终点是坐标点，所以x2 y2你还好吗？

注意：我们实际指定的值控制着这个小触点。

默认的左右两边有一个初始的默认点。比如下图左边黑点的初始坐标是x=0，y=0，而完工的初始坐标是x=1，y=1，所以实际总共有四个点，但是我们只能控制两个点。

示例：三次贝塞尔曲线(0.42，0，0.58，1)

以上是写在一起的写作方法，再次引用文章，可以分开指定。感兴趣的也可以看看这篇文章：https://www.cnblogs.com/afighter/p/5731293.html.

　　CSS设置

一、语法

transition : property duration time-function delay

过渡特征是复合特征，包括以下子特征：

Transition-property:规则设置转换函数的css特性标题。

转换持续时间：规则完成转换需要多少秒或毫秒？

过渡-定时-功能：指定过渡功能，以及规则速度的速度曲线。

Transition-delay:指定开始出现时的延迟时间。

默认值为：all0ease0。

注意：过渡持续时间为0，不会导致过渡。

更改多个css功能的过渡功能时：

a { transition : background 0.8 sease-in 0.3s，color 0.6 sease-out 0.3s；}

二，子特征

过渡性质

transition-property : none | all | property；

当值为无时，没有要素会达到过渡效果；当值为all时，所有特征都会达到过渡效果；当该值被指定为css要素时，将使用过渡效果，并且多个要素将由逗号分隔。

过渡持续时间

过渡持续时间：时间；

此功能主要用于设置一个特征过渡到另一个特征所需的时间，即从旧特征过渡到新特征所需的时间长度，俗称持续时间。

过渡定时功能

过渡-定时-功能：线性|缓和|缓和|缓和|缓和|缓和|三次贝塞尔曲线(n，n，n，n)；

这个特征指的是过渡的“缓和功能”。首先，用于指定浏览器的过渡速度和过渡期间的操作进度。解释一下：

注意：值三次贝塞尔(n，n，n，n)可以定义自己的值，比如三次贝塞尔(0.42，0，0.58，1)。

div { width:100px高度：100 px；背景-颜色：橙色；margin:20pxauto边界半径：100%；-web kit-transition-property :-web kit-border-radius；过渡属性：边界半径；-web kit-transition-duration :3s；过渡-持续时间：3s；-web kit-过渡-计时-功能：轻松；

过渡计时功能：轻松；

div:hover{

border-radius :0 px；

}

我试着用不同的价值观去看待差异，但并不明显。最好通过让它变长来估计持续时间，但是因为gif太大而无法上传，所以我得到了3秒。

Ease:从快到慢到慢

线性：恒速

轻松：越来越快了

Ease-out:越来越慢了。

Ease-in-out:先加速后减速。

过渡延迟

这个特性没什么好说的，就是跃迁开始前的延迟时间，单位秒或者毫秒。

再来一个栗子：

div { width:200px高度：200 px；背景：红色；margin:20pxauto-web kit-transition-property : background；transition-property :背景；-WebKit-transition-duration :5s；过渡-持续时间：5秒；-web kit-transition-time-function : ease-in；过渡计时功能：轻松进入；-web kit-transition-delay :18s；过渡延迟：18秒；

} div : hover { background : # 000；

}