對於過渡 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


免責聲明!

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



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