CSS transitions 提供了一種在更改CSS屬性時控制動畫速度的方法。 其可讓屬性變化成爲一個持續一段時間的過程,而不是當即生效的。好比,將一個元素的顏色從白色改成黑色,一般這個改變是當即生效的,使用 CSS transitions 後該元素的顏色將逐漸從白色變爲黑色,按照必定的曲線速率變化。這個過程能夠自定義。
transition = transition-property
+ transition-duration
+ transition-timing-function
+ transition-delay
動畫
transition-property
指定應用過渡屬性的名稱。可用屬性列表https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_propertiesnone
: 沒有過渡動畫。all
: 全部可被動畫的屬性都表現出過渡動畫。IDENT
: 屬性名稱。由小寫字母 a
到 z
,數字 0
到 9
,下劃線(_
)和破折號(-
)。第一個非破折號字符不能是數字。同時,不能以兩個破折號開頭。code
transition-duration
<time>
類型。表示過渡屬性從舊的值轉變到新的值所須要的時間。若是時長是 0s
,表示不會呈現過渡動畫,屬性會瞬間完成轉變。不接受負值。(單位s或者ms)get
transition-timing-function
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) <step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?) <step-position> = jump-start | jump-end | jump-none | jump-both | start | end
transition-delay
規定了在Transition開始做用以前須要等待的時間。值以秒(s)或毫秒(ms)爲單位,代表Transition將在什麼時候開始。取值爲正時會延遲一段時間來響應過渡效果;取值爲負時會致使過渡當即開始。it
Transition VS Animation
Transition能夠從一個狀態平滑地過渡到另外一個狀態,而Animation能夠作一系列更復雜的運動。Transition通常更易被建立和管理,並適用於大部分狀況。若是你須要對一個元素有更高的控制程度,那就能夠作一系列的Animation步驟;或者當須要在開始加載時就出現Animation,用關鍵幀完成動效會是更好的選擇。io