在網頁設計中，CSS動畫可以為網頁增添生動的元素、減少網頁的單調性，更好地吸引用戶。下面介紹一些有趣的CSS動畫效果，希望能夠給你的網頁設計提供一些靈感。

/*跳動的菜單*/
nav {
animation: bounce 1s ease infinite;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
/*常見的循環滾動*/
div {
animation: spin 3s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/*鼠標懸停變色*/
button {
transition: background-color 0.5s ease;
}
button:hover {
background-color: blue;
}
/*進度條效果*/
div {
width: 0;
height: 10px;
background-color: red;
animation: progress 5s ease-in-out forwards;
}
@keyframes progress {
0% {
width: 0;
}
100% {
width: 100%;
}
}

以上代碼展示了一些簡單但又好玩的CSS動畫效果，希望你可以嘗試一下并將其運用到你的網站中去。