CSS3 transition 屬性介紹

CSS3 transition 屬性

transition 屬性是一個簡寫屬性——設置元素當前過渡效果,用於設置四個過渡屬性:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
默認值: all 0 ease 0
繼承性: no
版本: CSS3
JavaScript 語法: object.style.transition="width 2s"

註釋:請始終設置 transition-duration 屬性,否則時長爲 0,就不會產生過渡效果。

描述
transition-property 規定設置過渡效果的 CSS 屬性的名稱。默認值是all
transition-duration 規定完成過渡效果需要多少秒或毫秒。默認值是 0,意味着不會有效果
transition-timing-function 規定速度效果的速度曲線。默認值是ease
transition-delay 定義過渡效果何時開始。規定在過渡效果開始之前需要等待的時間,以秒或毫秒計。

transition-timing-function 屬性規定過渡效果的速度曲線

描述
linear 規定以相同速度開始至結束的過渡效果(等於 cubic-bezier(0,0,1,1))。
ease 規定慢速開始,然後變快,然後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 規定以慢速開始的過渡效果(等於 cubic-bezier(0.42,0,1,1))。
ease-out 規定以慢速結束的過渡效果(等於 cubic-bezier(0,0,0.58,1))。
ease-in-out 規定以慢速開始和結束的過渡效果(等於 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章