淡入效果 ✅
```css
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade { animation: fadeIn 2s ease-in; }
```
[点击查看完整示例 → /css-animations_examples/fade]
缩放动画 🌀
```css
@keyframes scaleUp {
0% { transform: scale(1); }
100% { transform: scale(1.5); }
}
.scale { animation: scaleUp 1s infinite; }
```
[点击获取更多动画类型 → /css-animations_examples/transform]
滑动效果 🔄
```css
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
.slide { animation: slide 3s linear forwards; }
```
[探索进阶动画技巧 → /css-animations_tips]
旋转动画 ⏳
```css
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spin { animation: rotate 5s infinite; }
```
闪烁动画 🔦
```css
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.blink { animation: blink 1s infinite; }
```
[点击查看更多CSS动画示例 → /css-animations_examples]