CSS 如何讓 background-color 具有 transition 轉場效果

在沒有設置transition時，當游標經過時，background-color會直接變色。如果希望有過渡效果，可以加上transition來指定變色經過的時間。

範例

從上述範例，可以看到加上transition後就呈現顏色變化的過渡效果。code 如下：

transition: background-color 1000ms linear;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;

transition是轉場、過渡的意思，可以控制轉場動畫的過渡時間。 1000ms是1秒的意思，表示從開始到完成所需的時間。linear是等速的意思，除此之外還有其他值可以設定，如下：

1. ease：先加速再減速（預設值）。
2. linear：等速進行。
3. ease-in：逐漸加速。
4. ease-out：逐漸減速。
5. steps(5,end)：階段性的，5表示五個階段。
6. cubic-bezier：貝茲曲線（完全客製）。

延伸閱讀

• CSS 寬度隨文字內容長度而改變
• jQuery 模擬開關效果的按鈕
• input 數字範圍類型：number、range
• CSS 背景模糊（失焦效果）backdrop-filter
• CSS 滑鼠經過時顯示懸浮文字
• 職業工會如何選擇？如何檢測自己是否有符合資格？