css3动画animation-timing-function中的cubic-bezier(n,n,n,n)
程序员文章站
2022-04-19 17:37:49
...
transition-timing-function属性指定切换效果的速度。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
cubic-bezier即为贝兹曲线中的绘制方法。图上有四点,P0-3,其中P0、P3是默认的点,对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2的值范围在[0, 1]。
预留的几个特效:
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
推荐阅读
-
PHP中source #N问题的解决方法_PHP
-
varchar(n)中的n为什么要设的尽量小
-
百度地图中,如何根据一个坐标点搜索数据库中附近多少距内的N个坐标点
-
【剑指 Offer 53 - II】0~n-1中缺失的数字
-
剑指offer书(53)-2:0-n-1中缺失的数字
-
剑指OFFER----53-2、0~n-1中缺失的数字(js实现)
-
剑指 Offer 53 - II. 0~n-1中缺失的数字
-
剑指offer 53 - II. 0~n-1中缺失的数字
-
剑指 Offer 53 - II. 0~n-1中缺失的数字
-
设计一个算法:用不多于3n/2的平均比较次数,在数组A[1,...,n]中找出最大值和最小值的元素