在網頁設計中，CSS動畫能夠提升用戶體驗，使頁面更加生動有趣。CSS3擁有豐富的動畫屬性，其中hover動畫是其中一個常用的效果。

.selector:hover{
animation: 動畫名稱 動畫時長 動畫緩動函數;
}

上述代碼中，.selector為要添加hover效果的元素，:hover表示當鼠標指針位于其上方時的狀態。animation屬性指定要應用的動畫及其屬性，包含動畫名稱（由@keyframes定義）、動畫時長和動畫緩動函數。

以一個例子說明。在以下代碼中，我們定義了一個離開按鈕的旋轉動畫，鼠標懸停在按鈕上時動畫停止：

button {
background-color: #4CAF50;
color: white;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.rotate {
animation-name: rotateOut;
animation-duration: 2s;
}
.rotate:hover {
animation-play-state: paused;
}
@keyframes rotateOut {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

當鼠標懸停在按鈕上時，動畫狀態變為paused，即停止旋轉。當從按鈕上移開鼠標時，動畫繼續播放。

通過CSS3 animation hover，可以在網頁設計中添加簡單但有趣的動畫效果，提高用戶體驗。通過定義不同的動畫，可以使懸停的元素實現更多炫酷的效果。