html的过渡属性,CSS3中的元素过渡属性transition解析
原標題：CSS3中的元素過渡屬性transition解析
小伙伴們都知道過渡動畫是動畫的基礎，在學習動畫屬性之前，需要先了解過渡屬性transition，下面這篇文章通過示例代碼給大家詳細介紹了CSS3中的元素過渡屬性transition，小伙伴們可以參考：
css3的transition允許css3的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。
過渡transition：
這樣當我的光標懸浮在demo的一瞬間
它的寬度變成了200px
現在我們只需要添加一個屬性
就可以達到元素寬度緩慢變寬
transition它的作用就是指定當你的元素某些樣式發生變化時
這些樣式可以漸漸過渡到最終屬性值
有以下子屬性
transition-property：指定過渡或動態模擬的css屬性
transition-duration：指定過渡所需要的時間
transition-timing-function：指定過渡函數
transition-delay：指定開始出現的延遲時間
transition-property 我們想要哪種屬性過渡就寫哪種屬性
或者干脆寫過渡所有屬性的關鍵字all
transition-duration漸變時間屬性值就是“數字+s”
代表幾秒鐘內過渡
transition-timing-function 是可選的屬性值，有如下可選值
linear
線性過渡，等價貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease(默認)
平滑過渡，等價貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in
由慢到快，等價貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out
由快到慢，等價貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out
由慢到快再到慢，等價貝塞爾曲線(0.42, 0, 0.58, 1.0)
step-start
等同 steps(1, start)
step-end
等同 steps(1, end)
steps()：
兩個參數的步進函數。第一個參數為正整數，指定函數步數。第二個參數取值是start或end，指定每一步的值發生變化的時間點。第二個參數可選，默認值為end。
cubic-bezier(num, num, num, num)：
特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內
大多我們都用不上，最常用的大概就是我們默認的ease和線性過渡linear了
transition-delay 同樣是可選屬性值
如果你想要延遲過渡，換句話說如果我們想要在過渡前停一小會兒
那么就在這個復合屬性的最后添加我們需要延遲的時間“數字+s”返回搜狐，查看更多
責任編輯：
總結
以上是生活随笔為你收集整理的html的过渡属性,CSS3中的元素过渡属性transition解析的全部內容，希望文章能夠幫你解決所遇到的問題。
