CSS transition詳解

我們在做項目時，在進行開發 頁面元素的過渡效果時，經常會用到 CSS 的 transition 屬性，下面針對該屬性進行詳細講解：

 

先舉個例子，我們經常會用到：

.demo {
  width: 100px;
  height: 100px;
  background: #9370DB;
  transiton: width .5s
}
.demo:hover {
  width: 300px;
}

此時， .demo 元素在鼠標經過時， width 屬性由原來的 100px 變為 300px， transition： width  .5s 表示為 ‘width’ 屬性添加 0.5s 的過渡時間，其實 transition 屬性 共有四個參數，此處用到了兩個， 其余兩個元素默認為缺省值。

 

具體參數如下：

參數一： transition-property， 指定需要過渡效果的 CSS 屬性， 也就是上面的例子里的 width 屬性。、

參數二： transition-duration, 指定過渡效果需要指定多少秒或毫秒才能完成， 也就是上面例子里的 0.5s， 即 0.5 秒完成過渡效果。

參數三： transition-timing-function， 指定 transition 效果的轉速曲線， 默認缺省為 ease，具體可選參數如下：

值	描述
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 之間的數值。

參數四： transition-delay， 定義 transition 效果開始的時候， 這個相對用的頻率較低。

 

到這里，我們可以給出一個完整的 transition 語句：

transition： width 0.5s ease 0.5s

即 0.5s 后 對 width 屬性進行過渡，過渡效果慢速開始，然后變快，持續時間 0.5s。

 

這里再針對 cubic-bazier（貝澤爾曲線）進行講解，https://cubic-bezier.com/， 我們可以借助現在預覽曲線工具，根據需要設定值，

 

調節 紅、綠兩個按鈕，調整曲線的彎度， 曲線越陡過渡速度越快，相反曲線越平穩，過渡速度越慢。

 

通過自定義的 貝澤爾曲線，實現更多我們想要的過渡效果，也可以通過 在線工具顯示與 預設值得對比，更直觀得調整我們想要的效果。