CSS動畫是實現頁面效果的重要工具。下面介紹一些常用的CSS動畫效果。

1. 漸變過渡

.box {
background-color: red;
transition: background-color 1s ease;
}
.box:hover {
background-color: blue;
}

鼠標懸停時，背景顏色由紅色過渡到藍色。

2. 位移動畫

.box {
position: relative;
}
.box:hover {
transform: translateX(50%);
transition: transform 1s ease;
}

鼠標懸停時，元素向右移動50%。

3. 旋轉動畫

.box {
transform: rotate(0deg);
transition: transform 1s ease;
}
.box:hover {
transform: rotate(360deg);
}

鼠標懸停時，元素順時針旋轉360度。

4. 縮放動畫

.box {
transform: scale(1);
transition: transform 1s ease;
}
.box:hover {
transform: scale(1.5);
}

鼠標懸停時，元素放大1.5倍。

5. 切換動畫

.tab {
display: none;
}
.tab.active {
display: block;
animation: fade-in 1s ease;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

通過添加和刪除.active類，切換元素的顯示狀態，并使用漸變效果使切換更加流暢。