CSS中添加過渡效果讓網頁元素在不同狀態下呈現出更流暢的變化，為用戶帶來更好的體驗。過渡效果可以由兩種屬性實現，分別為transition和animation。其中，transition適用于一些簡單的變化，而animation更適合用于需要更復雜的動畫。

/*使用transition屬性添加過渡效果*/
.box{
width:100px;
height:100px;
background-color:red;
transition:width 2s;
}
.box:hover{
width:200px;
}
/*使用animation屬性添加過渡效果*/
.box{
width:100px;
height:100px;
background-color:red;
position:relative;
animation:change 2s infinite;
}
@keyframes change{
from{left:0;}
to{left:200px;}
}

以上兩個例子分別是使用transition和animation屬性添加過渡效果的示例。在第一個例子中，鼠標放在box元素上會使其寬度從100px變成200px，寬度改變的時候還會有一個2s的過渡時間，過渡效果看起來非常自然流暢。在第二個例子中，我們定義了一個動畫，當box元素被加載時，它會隨著時間變化而向右移動，循環播放時會一直出現過渡效果。這兩種效果都非常簡單易用，可以拓展到很多不同的實際應用場景，增加網頁的用戶友好性。