对于过渡 transition 的transition-timing-function 属性讲解

transition-timing-function (过度调速方法)

作用:定义 从开始到结束 过程的过渡效果

复合写法: transition: 应用属性 过度过程时间 过度效果 过度效果开始时间;

效果总结:

  1. 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; do you get it?
注意: 我们实际指定的值控制的是这个小触点
默认左边和右边是各有一个默认初始点的,比如下图左边黑色的点初始坐标就是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

posted @ 2020-03-31 14:04  StackOcean  阅读(1199)  评论(0编辑  收藏  举报