css3動畫animation-timing-function中的cubic-bezier(n,n,n,n)


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]。

預留的幾個特效:

1 ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
2 linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
3 ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
4 ease-out: cubic-bezier(0, 0, 0.58, 1.0)
5 ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM