CSS 過渡效果 (transition) 是一種讓元素的不同狀態之間平滑轉換的方式，常用來增加視覺效果，使網頁更加生動。透過過渡效果，屬性的變化會變得更加自然而不突兀，特別適合用於互動設計中。

1. 改變背景顏色

當使用者將鼠標移到 .box 元素上時，觸發這個樣式規則，將背景顏色變為紅色，並伴隨過渡效果。

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: background-color 0.5s ease;
}


.box:hover {
    background-color: red;
}

• transition: background-color 0.5s ease ： 當 .box 元素的背景顏色發生變化時，過渡會持續 0.5 秒，並使用 ease 曲線來控制變化的速度，使過渡更加自然。

• box:hove ： 當鼠標懸停時，顏色會改變。

2. 改變大小

當鼠標懸停在 .box 上時，寬度和高度會在 0.5 秒內平滑地從 100px 過渡到 200px，創造出一個放大效果。

.box {
    width: 100px;
    height: 100px;
    background-color: green;
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out; /* 設置寬度和高度的過渡 */
}


.box:hover {
    width: 200px;  /* 鼠標懸停時，寬度變為 150px */
    height: 200px; /* 鼠標懸停時，高度變為 150px */
}

• transition: width 0.5s ease-in-out, height 0.5s ease-in-out：

  • width 、 height : 兩個屬性都在 0.5 秒內變化。
  • ease-in-out : 曲線讓過渡從慢開始，然後加速，並在結束時再次變慢，創造更自然的動態效果。

• box:hover：當鼠標懸停時，寬度和高度變大，過渡效果使其平滑地進行。

3. 多屬性過渡

有時希望同時過渡多個屬性，例如同時改變元素的大小、顏色和形狀。
當鼠標懸停在 .box 元素上時，寬度、高度、背景顏色和旋轉角度都會發生變化，每個屬性都有不同的過渡時間。

.box {
    width: 100px;
    height: 100px;
    background-color: purple;
    transform: rotate(0deg); /* 初始旋轉角度為 0 度 */
    transition: width 1s, height 1s, background-color 0.5s, transform 0.5s;  /* 設置多屬性的過渡 */
}


.box:hover {
    width: 150px; 
    height: 150px; 
    background-color: orange; /* 背景顏色變為橙色 */
    transform: rotate(45deg); /* 元素旋轉 45 度 */
}

• transition : 對四個屬性設置了過渡，每個屬性的過渡時間不同，例如，背景顏色的過渡時間是 0.5 秒，而寬度和高度則是 1 秒，這讓過渡效果變得更加豐富多樣。

  • width 和 height : 在 1 秒內過渡

  • background-color : 在 0.5 秒內完成過渡

  • transform : 在 0.5 秒內發生

• transform （旋轉效果） ： 。當鼠標懸停時，元素會順時針旋轉 45 度，並且這個旋轉是平滑進行的。

這樣的設置可以讓不同屬性以不同速度變化，製造出豐富的動畫效果。