CSS是網頁設計中非常重要的一部分，它可以控制網頁的布局、顏色、字體等樣式。除此之外，CSS還可以用來制作各種炫酷的動畫效果。下面，我們來介紹一些常見的CSS動畫效果。

/* 1. 漸變過渡 */
#gradualChange{
width: 200px;
height: 200px;
background-color: yellow;
transition: background-color 2s;
}
#gradualChange:hover{
background-color: red;
}
/* 2. 彈跳效果 */
@keyframes bounce{
0%, 20%, 50%, 80%, 100%{
transform: translateY(0);
}
40%{
transform: translateY(-30px);
}
60%{
transform: translateY(-15px);
}
}
#bounce{
width: 100px;
height: 100px;
background-color: blue;
animation: bounce 2s ease-in-out;
}
/* 3. 旋轉效果 */
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
#rotate{
width: 100px;
height: 100px;
background-color: green;
animation: rotate 2s infinite linear;
}
/* 4. 翻轉效果 */
.flip{
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
}
.flip:hover{
transform: rotateY(180deg);
}
.front, .back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.front{
background-color: magenta;
}
.back{
transform: rotateY(180deg);
background-color: cyan;
}

以上四種動畫效果分別是漸變過渡、彈跳效果、旋轉效果和翻轉效果。它們都有自己的特點和用途，可以根據不同的頁面需求進行選擇使用。當然，這只是CSS動畫效果的冰山一角，還有很多其他的效果等待我們去發現和應用。