純css動畫是一種利用css屬性和關鍵幀來創建動畫的方式。由于不需要使用javascript或其他腳本語言的支持，因而其可移植性和兼容性非常好，得到了廣泛的應用和發展。

下面示范幾種常見的純css動畫效果代碼：

/* 1. 旋轉動畫 */
.rotate {
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 2. 縮小/放大動畫 */
.zoom {
animation-name: zoom;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes zoom {
0% { transform: scale(1); }
50% { transform: scale(0.5); }
100% { transform: scale(1); }
}
/* 3. 淡入/淡出動畫 */
.fade {
animation-name: fade;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes fade {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}

本文介紹的三種動畫效果都是基于關鍵幀的動畫，通過定義不同狀態下的樣式來控制元素的變化。具體的動畫效果可以根據需求自行修改，比如動畫持續時間、運動曲線等。

當然，css動畫還有更多的可能性。掌握純css動畫，能夠幫助我們實現更加精細和豐富的交互效果，提升網頁的用戶體驗。