Kevin Chang的前端學習部落格

文章參考來源:  https://ithelp.ithome.com.tw/articles/10200365

Transition屬性

• transition-property:指定要轉換的CSS屬性

• transition-duration:轉換需要的時間，預設0，單位為s或ms

• transition-delay:延遲多久轉換，預設0，單位為s或ms

• transition-timing-function:轉換時的速度曲線，預設ease

以下表格是transition-timing-function較常用的幾個屬性值：

名稱	說明	=cubic-bezier(X,X,X,X)
linear	均速	cubic-bezier(0,0,1,1)
ease	緩入中間快緩出，預設值	cubic-bezier(.25,.1,.25,1)
ease-in	緩入	cubic-bezier(.42,0,1,1)
ease-out	緩出	cubic-bezier(0,0,.58,1)
ease-in-out	緩入緩出(對比於ease較平緩)	cubic-bezier(.42,0,.58,1)
cubic-bezier(n,n,n,n)	利用貝茲曲線自定義速度模式，n=0~1中的數值	cubic-bezier(n,n,n,n)

cubic-bezier，可參考https://cubic-bezier.com/
更多屬性值可參考https://developer.mozilla.org/zh-TW/docs/Web/CSS/transition-timing-function

Transition縮寫

transition: transition-property | transition-duration | transition-timing-function | transition-delay;

CSS中的transition屬性像background屬性一樣可以分開寫也可以縮寫，但也一樣有順序性，transition用到transition-duration及transition-delay，兩個屬性都是時間單位，因此容易搞混：

1. 如果出現單寫：transition: width 1s的話，1s指的是transition-duration
2. 寫了兩個時間單位數值：前面出現的是transition-duration，後出現是transition-delay

建議：如果是多人共同開發專案建議不要使用縮寫，像是transition就用到兩個屬性都是時間單位，容易搞混，寫得越詳細越有利於多人專案開發。

單一屬性、多個屬性做Transition

transition預設對所有可套用屬性進行，但也可以針對單個或多個

1. 單個寫法：

.button:hover{
transition:height 1s;
}

1. 多個寫法：使用逗號將不同屬性隔開即可

.button:hover{
transition:width 1s, height 2s;
}

雙向Transition

1.如果要雙向動畫都相同，只要在原始狀態加入transition屬性，在觸發狀態更改要轉換的屬性參數即可。
下圖無雙向的動圖，是只有在hover加上tansition屬性，所以會在滑鼠離開時，直接跳回原始狀態;而要呈現右方雙向動畫，只要在原始狀態加上transition屬性，並在滑鼠移入狀態加上要改變的屬性轉換參數就可以囉～

.button{
color:white;
text-align:center;
background-color:#356EAF;
width:100px;
height:100px;
transition:width 1s,height 1s;
}
.button:hover{
background-color:#356EAF;
width:150px;
height:150px;
}

2.如果雙向動畫要不同，可以分別在觸發狀態加上觸發時的transition屬性，在原始狀態加上返回時的的transition屬性，控制不同的效果

.button{
color:white;
text-align:center;
background-color:#356EAF;
width:100px;
height:100px;
transition:width 1s, height 1s;
}
.button:hover{
background-color:#356EAF;
width:150px;
height:150px;
transition:width 3s , height 3s;
}

Transition無法作用的情況

• transition必須是確切數值的轉換
  transition轉換的開始和結束屬性值都必須是確切數值，否則將無法進行計算，如以下情形：

  1. width:auto(不確定的值)轉換成width:100px(確切值)
  2. display:none轉換成display:block，none和block都不是數值

• transition需要事件觸發
  沒辦法一進頁面自動產生效果。需透過JavaScript事件處理或是就只能配合與事件有關的偽類別(:hover、:focus 等)呈現效果。