CSS3動畫是現代網頁設計的一項核心技術，它為網頁添加了許多生動而富有情感的動態效果。而CSS3的transition和animation兩種動畫屬性，更是讓這項技術威力更進一步，讓我們來看一下這兩種屬性的使用方法和區別吧！

/* transition屬性 */
.box{
width: 100px;
height: 100px;
background-color: #f00;
transition: all .5s ease-in-out;
}
.box:hover{
width: 150px;
height: 150px;
background-color: #00f;
}
/* animation屬性 */
.box{
width: 100px;
height: 100px;
background-color: #f00;
animation: move 1s ease-in-out infinite;
}
@keyframes move{
0%{transform: translateX(0);}
50%{transform: translateX(100px);}
100%{transform: translateX(0);}
}

transition是一種屬性，可以改變元素的某些屬性，例如位置、大小、顏色等，并且可以慢慢地或者突然地改變，用來實現鼠標懸停、點擊等交互效果非常實用。而animation則是一種更強大的屬性，可以通過關鍵幀（@keyframes）來定義元素在某一段時間內的動畫過程，例如平移、旋轉、縮放等，具有無限循環、延時等高級功能。

總的來說，transition適用于簡單的動態效果，而animation則更適用于更復雜的動態效果和視覺特效，它們可以讓我們的網頁更加生動有趣，給用戶帶來更好的體驗。