最近在學習前端開發(fā)，發(fā)現(xiàn)CSS的動畫真的是可愛極了！

雖然只是靜態(tài)頁面中的小細節(jié)，但是加入動畫后，頁面的活力和趣味性瞬間上升了好幾個級別。

下面是我最喜歡的幾種CSS動畫：

/* 1. 旋轉(zhuǎn)動畫 */
.rotate {
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/* 2. 縮放動畫 */
.scale {
animation-name: scale;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
/* 3. 跳動動畫 */
.bounce {
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes bounce {
0%, 50%, 100% {
transform: translateY(0);
}
25% {
transform: translateY(-20px);
}
75% {
transform: translateY(-10px);
}
}

以上動畫只是簡單的演示，并沒有完全發(fā)揮出CSS動畫的魔力。

如果你想要進一步了解CSS動畫的更多技能，可以參考這里。

歡迎大家一起來把我們的網(wǎng)站變得更加可愛和有趣！