transition-timing-function (過度調速方法)
作用:定義 從開始到結束 過程的過渡效果
復合寫法: transition: 應用屬性 過度過程時間 過度效果 過度效果開始時間;
效果總結:
- 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