CSS3動畫是現代網頁設計中的必備技能之一。它可以為網站添加生動的元素和動態效果，使用戶的瀏覽體驗更加豐富。本文將介紹80種常見的CSS3動畫效果。

首先，我們來看一下基本的CSS3動畫屬性：

animation-name: 動畫的名稱;
animation-duration: 動畫的持續時間;
animation-timing-function: 動畫的時間函數;
animation-delay: 動畫的延遲時間;
animation-iteration-count: 動畫的循環次數;
animation-direction: 動畫的播放方向;
animation-fill-mode: 動畫的填充模式。

接下來，我們將為大家介紹80種常見的CSS3動畫效果。

1. 抖動動畫
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
2. 旋轉動畫
animation: rotate 2s linear infinite;
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
3. 翻轉動畫
animation: flip 2s linear infinite;
@keyframes flip {
from {
transform: perspective(400px) rotateX(0);
}
to {
transform: perspective(400px) rotateX(360deg);
}
}
4. 縮放動畫
animation: scale 1s linear infinite;
@keyframes scale {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(0.5);
}
}
5. 淡入淡出動畫
animation: fade 2s linear infinite;
@keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
……

在實際應用中，可以根據需要對上述動畫效果進行修改和組合，從而創建出更加個性化的動態效果。

總之，CSS3動畫為網頁設計提供了更加豐富的表現手段，開發人員可以根據需求進行巧妙的運用，創造出更加生動、精美的網站。