CSS過渡（Transition）與動畫（Animation）是網頁設計中常用的兩種效果。

首先，我們先看一下CSS過渡。過渡是從一個狀態到另一個狀態的平滑過程，如圖：

.box{
width: 100px;
height: 100px;
background-color: red;
transition: width 1s;
}
.box:hover{
width: 200px;
}

上述代碼意思是，當鼠標放在box元素上時，寬度從100px過渡到200px，平滑完成，過程時間為1s。這時候，box的背景顏色將保持為紅色。

接下來是CSS動畫，它可以比過渡更復雜、更豐富。我們可以定義多個關鍵幀，在每個關鍵幀設置不同的樣式，然后瀏覽器按照這些關鍵幀對動畫進行渲染，如圖：

.box{
position: relative;
animation: move 2s infinite;
}
@keyframes move{
0%{
left: 0;
}
50%{
left: 50%;
transform: rotate(45deg);
}
100%{
left: 100%;
}
}

上述代碼創建了一個名為“move”的動畫，這個動畫將在2秒內無限循環播放。在關鍵幀中，我們分別定義了0%、50%和100%三個關鍵幀。當動畫播放到50%時，box元素將移動到屏幕的中心并旋轉45度，如圖：

總的來說，CSS過渡與動畫雖然用法不同，但都是為了實現一種動態效果。在應用它們的時候，需要根據實際需求二者自由選擇，達到更好的效果。