CSS動(dòng)畫是Web設(shè)計(jì)中非常重要的一部分，它可以打造出許多吸引人眼球的特效效果，使得網(wǎng)站看起來(lái)更加生動(dòng)和有活力。這其中，不同的動(dòng)畫名稱也代表著不同的效果和作用，下面我們來(lái)介紹一些常見(jiàn)的CSS動(dòng)畫名稱。

1. Fade in/out（淡入淡出）
.fade-in{
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}
2. Bounce（彈跳）
@keyframes bounce{
0% {bottom: 0px;}
50% {bottom: 15px;}
100% {bottom: 0px;}
}
.bounce-element{
animation: bounce 1s infinite;
}
3. Zoom（縮放）
@keyframes zoom {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}
.zoom-element{
animation: zoom 1s alternate infinite;
}
4. Rotate（旋轉(zhuǎn)）
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
.rotate-element{
animation: rotate linear infinite;
}
5. Shake（抖動(dòng)）
@keyframes shake {
0% { transform: translate(0, 0); }
10% { transform: translate(-10px, 0); }
20% { transform: translate(10px, 0); }
30% { transform: translate(-10px, 0); }
40% { transform: translate(10px, 0); }
50% { transform: translate(-10px, 0); }
60% { transform: translate(10px, 0); }
70% { transform: translate(-10px, 0); }
80% { transform: translate(10px, 0); }
90% { transform: translate(-10px, 0); }
100% { transform: translate(0, 0); }
}
.shake-element{
animation: shake 1s infinite;
}

以上就是幾種常見(jiàn)的CSS動(dòng)畫名稱和代碼示例，您可以根據(jù)自己需要來(lái)選擇和運(yùn)用。同時(shí)，CSS動(dòng)畫名稱也是不斷發(fā)展和演變的，未來(lái)我們還將看到更多的新型CSS動(dòng)畫效果出現(xiàn)，展現(xiàn)Web設(shè)計(jì)的最新潮流。