CSS是前端開發必不可少的一部分，除了能讓網頁更加美觀外，它還能幫助我們實現各種炫酷的動畫特效。下面讓我們來看一些常見的CSS動畫特效代碼。

/* 1. 旋轉特效 */
.rotate {
animation: rotation 2s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
/* 2. 抖動特效 */
.shake {
animation: shake 0.5s infinite;
}
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(5px);
}
100% {
transform: translateX(0);
}
}
/* 3. 漸變特效 */
.gradient {
background: linear-gradient(to right, #ff0066, #753a88);
animation: gradient 3s ease-in-out infinite alternate;
}
@keyframes gradient {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
/* 4. 縮放特效 */
.zoom {
animation: zoom 1s ease-in-out infinite alternate;
}
@keyframes zoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}

以上就是一些常見的CSS動畫特效代碼，它們可以應用在不同的元素上，如文本、圖片等，為網頁增加更加豐富的交互體驗。