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

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

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

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

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

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

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

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

transition-timing-function 的五種取值

linear：勻速

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

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

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

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

觸發(fā)過渡

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

:hoever :focus :checked 媒體查詢觸發(fā) JavaScript觸發(fā)

局限性

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

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

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

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

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的html的过渡属性,CSS3属性transition（过渡）多属性详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。