CSS 动画的艺术：让你的网页像番剧一样灵动

你有没有注意到，一部优秀的动漫作品中，角色的每一个微表情、头发的每一次飘动，都是动画师精心设计的？网页动画也是如此 —— 好的动画不是炫技，而是让体验变得"刚刚好"。

动画的三条黄金法则

1. 有目的、有节奏

每个动画都应该传达信息。一个按钮被点击后的缩放反馈、页面切换时的过渡效果，都是在告诉用户"操作已生效"。

2. 缓动函数决定质感

CSS 中的 cubic-bezier 是你最好的朋友。模仿自然的运动轨迹，让动画看起来有"重量感"。

/* 动漫风格的弹跳缓动 */
.anime-bounce {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anime-bounce:hover {
  transform: scale(1.08);
}

3. 性能优先

只对 transform 和 opacity 做动画，永远保持 60fps 的流畅体验。

打造二次元风格的动效

樱花飘落效果

使用 CSS @keyframes 结合随机延迟，可以创建出自然的樱花飘落效果：

@keyframes sakura-fall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

.petal {
  animation: sakura-fall 10s linear infinite;
  animation-delay: var(--delay);
}

光点粒子

利用径向渐变和多层阴影，可以做出发光粒子的效果，非常适合魔法少女题材的设计。

实用工具推荐

• Lottie — 将 After Effects 动画导出为 JSON，直接在网页播放
• GSAP — 专业级动画库，时间线控制非常强大
• Framer Motion — React 生态中最优雅的动画方案

动画是网页的"表情包"，用得恰到好处，就能让你的网站充满生命力。

让代码也拥有二次元的温度。