這篇文章主要講解了“css中transition的說明和實例用法”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css中transition的說明和實例用法”吧！

創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、通海網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5技術、成都做商城網(wǎng)站、集團公司官網(wǎng)建設、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為通海等各大城市提供網(wǎng)站開發(fā)制作服務。

說明

1、transition允許在CSS屬性變化時給它添加一個過度的動畫效果。

通常情況下，CSS 屬性變化是立即生效的，新的屬性值在超級短的時間內(nèi)替換掉舊的屬性值，然后瀏覽器重新繪制樣式內(nèi)容（可能是 reflow 或者 repaint）。大部分情況下會感覺樣式變化突兀，而transition則可以添加順滑的一個變化效果。

2、transition的兼容性不算差，基本上移動設備都可以使用。

并且能做到漸進增強，支持的便有過渡效果，不支持的便是直接切換，所以可以放心使用。

實例

.content {
  background: magenta;
  transition: background 200ms ease-in 50ms;
}
 
.content:hover {
  background: yellow;
  transition: background 200ms ease-out 50ms;
}

感謝各位的閱讀，以上就是“css中transition的說明和實例用法”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對css中transition的說明和實例用法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！