transform呈現的是一種變形結果，而transition呈現的是一種過渡，通俗點說就是一種動畫轉換過程，如漸顯、漸弱、動畫快慢等。transition和transform是兩種不同的動畫模型。

transition屬性是一個簡寫屬性，用于設置四個過渡屬性

transition-property ：指定要過渡的css屬性

transition-duration： 指定完成過渡花費的時間

transition-timing-function： 指定速度效果的速度曲線

transition-delay：指定過渡效果何時開始屬性可以分開寫,也可以放在一起寫,放在一起寫即

transiton:過渡屬性 過渡所需要時間 過渡動畫函數 過渡延遲時間；

注：始終設置 transition-duration 屬性，否則時長為 0，就不會產生過渡效果。transition可以和transform同時使用。

transition-timing-function 的五種取值

linear：勻速

ease： 默認，動畫以低速開始，然后加快，在結束前變慢。

ease-in：緩慢開始(加速)

ease-out：緩慢結束(減速)

ease-in-out：緩慢開始，緩慢結束(先加速后減速)

觸發過渡

單純的代碼不會觸發任何過渡操作，需要通過用戶的行為(如點擊，懸浮等)觸發，可觸發的方式有：

:hoever :focus :checked 媒體查詢觸發 JavaScript觸發

局限性

(1)transition需要事件觸發，所以沒法在網頁加載時自動發生。

(2)transition是一次性的，不能重復發生，除非一再觸發。

(3)transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

(4)一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

CSS animation就是為了解決這些問題而提出的。