transition属性详细讲解
transition屬性的格式：
它的四個過渡屬性是這樣的意思：
transition-property：規定設置過渡效果的屬性名稱。
transition-duration：規定完成這個過渡效果需要多少秒或者毫秒。
transition-timing-function：規定這個過渡效果的速度曲線。
transition-delay：規定過渡的延遲時間。
過渡的動畫類型主要有：
linear：線性過渡。
ease：平滑過渡。
ease-in：逐漸加速。
ease-out：逐漸減速。
ease-in-out：先加速后減速。
他們的屬性介紹主要是：
linear：規定以相同的速度開始至結束的過渡效果。
ease：規定慢速開始逐漸變快然后慢速結束的過渡效果。
ease-in：規定以慢速度開始的過渡效果。
ease-out：規定以慢速度結束的過渡效果。
ease-in-out：規定以慢速開始至結束的過渡效果。
我們做一個小例子，我們利用偽類，當光標移動在div上，背景顏色由紅色變成綠色：
???????
總體來說：transition屬性還是搭配偽類用的比較多，比如hover、：focus，但是也常會用到javascript、@madia觸發。transition和javascript的結合更為強大。js用來設定要變化的樣式，transition則負責動畫效果。我們一般都在css里面寫transition，transition屬性可以指定參與的過渡屬性，過度時間，過渡延遲時間以及過渡動畫類型等。
在寫代碼的時候發現transition-property屬性不顯示，我后來去博客查了查，才知道目前的主流瀏覽器，需要我們在實際開發中加瀏覽器廠商的前綴。我們舉個例子。
寫完了，看看瀏覽器端，IE沒問題，chrome沒問題，火狐也沒問題，Opera問題來了，居然沒有效果，最后發現Opera要這樣寫：
大家看到差異了嗎？
我總結一下：
火狐：-moz-
IE：-ms-
chrome：-webkit-
opera：-o-
總結
以上是生活随笔為你收集整理的transition属性详细讲解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【12】 全国外电音DJ 3000首 3
- 下一篇： 【14】全歌王歌后合集