[TOC] > [MDN 參考](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) > [在線 貝塞爾曲線](https://cubic-bezier.com/#0,-0.55,.91,.65) ## transition **transition的使用注意** 1. 目前，各大瀏覽器（包括IE 10）都已經支持無前綴的transition，所以transition已經可以很安全地不加瀏覽器前綴。 2. 不是所有的CSS屬性都支持transition，完整的列表查看這里，以及具體的效果。 3. transition需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。比如，height從0px變化到100px，transition可以算出中間狀態。但是，transition沒法算出0px到auto的中間狀態，也就是說，如果開始或結束的設置是height: auto，那么就不會產生動畫效果。類似的情況還有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。 **transition的局限** transition的優點在于簡單易用，但是它有幾個很大的局限。 1. transition需要事件觸發，**所以沒法在網頁加載時自動發生**。 2. transition是一次性的，不能重復發生，除非一再觸發。 3. transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。 4. 一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。 CSS Animation就是為了解決這些問題而提出的。 --- 比如在不同的偽元素之間切換，像是 `:hover`，`:active` 或者通過 JavaScript 實現的狀態變化 語法 ``` /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function */ transition: margin-right 4s ease-in-out; /* Apply to 2 properties */ transition: margin-right 4s, color 1s; /* Apply to all changed properties */ transition: all 0.5s ease-out; ``` timing function ``` transition-timing-function: ease transition-timing-function: ease-in #緩入 transition-timing-function: ease-out #緩出 transition-timing-function: ease-in-out #緩入緩出 transition-timing-function: linear # 線性 transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1) # 貝塞爾曲線 transition-timing-function: step-start transition-timing-function: step-end transition-timing-function: steps(4, end) #分四段執行 ``` ## 示例 ``` <style> #demo{ height: 100px; width: 100px; transition: all 2s linear; background-color: #0a2b1d; } #demo:hover{ height: 200px; width: 200px; background-color: #009797; } </style> <div id="demo"> </div> ```