CSS動畫(2) - transition

CSS的transition容許CSS的屬性值在必定的時間區間內平滑地過渡
這種效果能夠在鼠標點擊 得到焦點 或對元素的任何改變中觸發
並圓滑的以動畫效果改變CSS的屬性值

語法
transition自己也是一個複合屬性 , 主要包含4個屬性值

1. 執行變換的屬性 transition-property
2. 變換延續的時間 transition-duration
3. 在變換時間內 , 變換的速率變化 transition-timing-function
4. 變換的延遲時間 transition-delay

對於多組值 , 它們之間使用逗號分隔

transition-property

用來指定哪一個CSS屬性在變換的過程當中應用動畫效果
能夠取值 none , all 或者具體的屬性名稱
all表明任何能夠實現動畫變換的屬性 , 在變換時都會應用動畫效果 , 它是默認值

transition-duration

用於指定元素轉換過程的持續時間 , 單位能夠是s或者ms
例如 0.5s , 或者也能夠寫做 .5s
默認值爲0

transition-timing-function

這個屬性值的自己是一個貝塞爾曲線
有幾個預約義的值 , 或者也能夠自定義一個曲線

如圖所示 , 起點和終點也就是P₀和P₃的位置是固定的
只須要指定P₁和P₂的座標 , 便可決定該曲線的曲率變化
曲線上每一個點的切線斜率表明在該時間點的變換速率

P₁(x1,y1)
P₂(x2,y2)
因此自定義貝塞爾曲線的方式就是 cubic-bezier(x1,y1,x2,y2)
固然x的值須要在[0,1]的區間內 , 不然無效
y的值能夠超過1或者小於0 , 好比構造一個來回的緩衝效果

預約義的貝塞爾曲線

1. ease：（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
2. linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
3. ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).
4. ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).
5. ease-in-out：（加速而後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

transition-delay

指定一個動畫開始的延遲時間 , 默認爲0

補充說明 :
在transition當中 , 這4個單屬性值其中的每一個都是能夠省略的
但一般不會省略持續時間 , 由於省略以後就看不到動畫的效果了

---

兼容性

爲了兼容舊版本的瀏覽器 , 咱們一般須要給transition屬性加上前綴

box {
    -moz-transition:color 0.5s ease-in;
    -webkit-transition:color 0.5s ease-in;
    -o-transition:color 0.5s ease-in;
    transition : color 0.5s ease-in;
}

或者也可使用postcss這種預處理工具 , 來自動添加屬性的前綴