輕量級 CSS 動畫可以提升網站的用戶體驗，同時不會增加太多的頁面加載時間。本文將介紹一些常見的輕量級 CSS 動畫，以及它們的實現方法。

1. 漸變動畫

這種動畫可以讓一個背景色產生漸變效果，給人一種柔和的感覺。下面是實現代碼：

.background {
background: linear-gradient(90deg, #f00, #0f0, #00f);
background-size: 200% 200%;
animation: gradient 4s linear infinite;
}
@keyframes gradient {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}

2. 旋轉動畫

這種動畫可以讓一個元素沿著一個中心點旋轉，產生一種有趣的效果。下面是實現代碼：

.spinner {
position: relative;
}
.spinner:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #000;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

3. 縮放動畫

這種動畫可以讓一個元素從小變大，或從大變小，產生一種視覺上的壓縮和擴張效果。下面是實現代碼：

.box {
transform: scale(1);
transition: transform 0.2s;
}
.box:hover {
transform: scale(1.1);
}

如上所述，這些輕量級 CSS 動畫可以幫助我們創造更好的用戶體驗。同時，我們需要注意到這些動畫也會消耗一定的性能，因此在實際使用時需要量力而行。