CSS動畫是一種讓頁面元素動起來的技術，它能夠增強網頁交互性和視覺效果，讓用戶體驗更加豐富。下面我們將介紹如何使用CSS實現簡單動畫。

/* 為了演示方便，我們使用一個按鈕作為動畫元素 */
.btn {
width: 100px;
height: 40px;
background: #00bcd4;
color: #fff;
border: none;
outline: none;
cursor: pointer;
font-size: 16px;
text-align: center;
transition: background 0.2s ease; /* 過渡動畫 */
}
/* 鼠標懸停時的效果 */
.btn:hover {
background: #0097a7;
}
/* 點擊時的效果 */
.btn:active {
outline: none;
background: #006d79;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
transform: scale(0.9);
}
/* 循環播放的動畫 */
@keyframes spin {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
.btn-spin {
animation: spin 1s linear infinite;
}

通過以上CSS代碼，我們分別實現了懸停效果、點擊效果以及循環播放的動畫效果。其中，transition屬性用于定義過渡動畫，比如我們鼠標懸停時按鈕的背景色變化就是過渡動畫。

而對于點擊觸發的動畫，我們使用了transform屬性來縮放按鈕大小，同時利用box-shadow屬性實現陰影效果。另外，我們還給動畫命名了spin，并設定循環1秒的播放時長，通過animation屬性將其應用到按鈕上，讓按鈕能夠持續旋轉。

總之，CSS動畫是一種簡單易用的技術，只需少量的代碼就能讓頁面變得更加生動和豐富。了解了以上基礎知識后，我們可以通過更多的實踐來不斷提升動畫效果的質量和數量。