CSS過渡是一種向HTML元素添加平滑過渡效果的技術，簡單理解就是元素從一種狀態到另一種狀態的過程中，可通過漸變、旋轉、大小變化等方式實現平滑過渡，提高頁面的交互性和美感。
下面介紹一些常見的CSS可過渡的樣式。

/* 使用過渡效果改變元素的寬度 */
.element {
width: 100px;
transition: width 0.5s ease-in-out;
}
.element:hover {
width: 200px;
}
/* 使用過渡效果改變元素的顏色 */
.element {
background-color: blue;
transition: background-color 0.5s ease-in-out;
}
.element:hover {
background-color: red;
}
/* 使用過渡效果改變元素的位置 */
.element {
position: absolute;
top: 50px;
left: 50px;
transition: top 0.5s ease-in-out, left 0.5s ease-in-out;
}
.element:hover {
top: 100px;
left: 100px;
}
/* 使用過渡效果改變元素的透明度 */
.element {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.element:hover {
opacity: 0.5;
}
/* 使用過渡效果改變元素的大小 */
.element {
width: 100px;
height: 100px;
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}
.element:hover {
width: 200px;
height: 200px;
}

CSS過渡是使網頁變得更加生動和立體，讓用戶能夠更加愉悅地使用網頁?？梢愿鶕嶋H需求選擇不同的過渡效果，讓網頁更具有交互性和美感。