在網頁設計中，CSS動畫已經成為必不可少的一部分。它可以為網頁增添生動、有趣、活潑的氣息。以下是一些常見的CSS動畫案例：

/*示例一：懸停動畫*/
.box:hover {
transform: scale(1.1);
}
/*示例二：過渡動畫*/
.box {
width: 100px;
height: 100px;
background-color: #ff0000;
transition: width 2s, height 2s, background-color 2s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: #0000ff;
}
/*示例三：旋轉動畫*/
.box {
width: 100px;
height: 100px;
background-color: #ff0000;
}
.box:hover {
transform: rotate(360deg);
transition: transform 2s;
}
/*示例四：彈跳動畫*/
.box {
width: 100px;
height: 100px;
background-color: #ff0000;
animation: bounce 1s;
animation-iteration-count: infinite;
}
@keyframes bounce {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(0, -20px);
}
50% {
transform: translate(0, 0);
}
75% {
transform: translate(0, -10px);
}
100% {
transform: translate(0, 0);
}
}

以上這些例子只是冰山一角，CSS動畫的可能性無限且多樣，它們可以為網頁增色不少?，F代的網站設計需要好看、有效、易于使用，CSS動畫可以讓你的網站更加美觀，為用戶提供更好的體驗。