1. 从零开始：理解CSS3动画的核心武器

很多刚接触前端动画的朋友，一听到“用CSS做烟花”可能觉得挺玄乎，以为要写一大堆复杂的代码。其实不然，CSS3动画的门槛远比想象中低，它的核心就是两样东西：transform（变换） 和 animation（动画）。你可以把它们想象成拍电影时的道具师和导演。

transform 是道具师，负责改变一个元素的外观形态。比如，它能让一个元素变大（scale）、旋转（rotate）、移动（translate）或者倾斜（skew）。我们烟花效果里，烟花从小变大的膨胀感，就是 scale 的功劳；而烟花粒子四散飞溅，则离不开 translate 的移动。

animation 就是导演，它负责指挥整个表演的过程。它不直接改变元素，而是告诉元素：“听好了，在接下来的3秒钟里，你先慢慢变大，然后在最后0.5秒淡出消失。” 这个指挥的依据，就是 @keyframes（关键帧）。关键帧就像电影的分镜脚本，你定义了在动画的0%、50%、100%这些关键时刻，元素应该是什么样子（比如 transform: scale(0) 或 opacity: 1），浏览器这位“演员”就会自动补全中间的所有帧，让动画流畅播放。

我刚开始学的时候，总觉得 animation 那一堆参数（name, duration, timing-function, delay, iteration-count, direction, fill-mode）让人头疼。后来发现，你只需要先记住前三个：动画名称、持续时间和速度曲线。比如 animation: pop 2s ease-in-out; 就解决了80%的需求。ease-in-out 这种速度曲线特别重要，它让动画有“慢入慢出”的物理感，而不是机械地匀速运动，这对于模拟烟花爆炸那种先加速后减速的力道至关重要。

2. 拆解烟花：升空、爆炸与消散的动画分解

一个完整的烟花效果，绝不是简单的一个圆圈放大然后消失。那样太假了。真实的烟花过程，我们可以拆解成三个连续的阶段，用CSS来逐个击破。

第一阶段：升空轨迹。 这就是原始文章里 #firecracker 在做的事情。一个小点（鞭炮/升空弹）从屏幕底部快速向上移动。这里的关键是，移动不是匀速的。真实的火箭升空是开始慢（克服重力），中间快（动力十足），快到顶点时又变慢（动力耗尽）。我们用 animation-timing-function 来模拟，比如 cubic-bezier(0.1, 0.8, 0.2, 1) 这个贝塞尔曲线，就能创造出这种“发射感”。同时，在上升过程中，我们还可以让这个点微微 scale 变小，模拟它离我们远去、视角变小的效果。

第二阶段：核心爆炸。 这是最炫的一步。原始文章用了一个 scale(0) 到 scale(1) 的变化。但我们可以做得更细腻。爆炸是一瞬间的膨胀，所以 scale 的变化在初始几帧应该非常快。我们可以这样定义关键帧：

@keyframes explode {
  0% { transform: scale(0); opacity: 1; }
  20% { transform: scale(1.2); } /* 先稍微“过冲”一点，更有爆发力 */
  40% { transform: scale(1); } /* 再回弹到正常大小 */
  100% { transform: scale(1); opacity: 1; } /* 保持住，为下一步粒子散开做准备 */
}

注意，这里爆炸本身的 opacity 在100%时还是1，因为我们要让它作为粒子散开的“母体”持续存在。

第三阶段：粒子散开与消散。 这才是烟花绽放的灵魂。爆炸的核心光团只是一个开始，真正美丽的是四散的火花。这部分原始文章没有涉及，我们需要创造多个粒子。通常，我们用多个 <div> 或者用 ::before、::after 伪元素来生成这些粒子。每个粒子都需要两个动画：一个是沿着不同方向 translate 移动，另一个是 opacity 从1到0的淡出。移动的轨迹可以用 translateX 和 translateY 组合，甚至加上一点 rotate 制造旋转飘落的效果。粒子的颜色可以用 box-shadow 生成光晕，或者直接用彩色的背景色。

3. 实战进阶：打造多色、多形态的粒子绽放效果

好了，理论说再多不如动手写一行。我们现在就来升级原始文章那个简单的例子，做一个更逼真的、带彩色粒子的烟花。

首先，HTML结构需要调整。我们不再只有两个 div，而是需要动态或静态地生成一堆粒子。为了简单演示，我们可以先写死10个粒子：

<div class="firework">
  <div class="core"></div> <!-- 爆炸核心 -->
  <div class="particle p1"></div>
  <div class="particle p2"></div>
  <!-- ... 一直到 p10 -->
</div>

当然，实际项目里最好用JavaScript动态生成，但CSS原型阶段写死更方便调试。

核心的CSS来了。我们先定义爆炸核心的动画，就是上面提到的“膨胀-回弹”效果：

.core {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ffeb3b, #ff9800);
  border-radius: 50%;
  position: absolute;
  animation: coreExplode 0.6s ease-out forwards;
}

@keyframes coreExplode {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

接下来是重头戏——粒子。每个粒子的基础样式相同，但起始位置（从核心出发）、运动方向和颜色不同。

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0; /* 初始隐藏 */
}

/* 为每个粒子定义独特的动画和颜色 */
.p1 {
  background-color: #ff5252;
  animation: particleFly 1s 0.1s ease-out forwards;
}
.p2 {
  background-color: #448aff;
  animation: particleFly 1s 0.15s ease-out forwards;
}
/* ... 其他粒子 */

@keyframes particleFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(45px, -65px) scale(0.2); /* 飞向东北方向 */
  }
}

这里有个关键技巧：动画延迟（animation-delay）。我们给每个粒子的动画设置不同的延迟时间（如0.1s, 0.15s...），这样它们就不会同时飞出去，而是有先有后，形成一种“绽放”的时序感，而不是“炸开”的同步感。transform 里的 translate(45px, -65px) 定义了粒子的最终位移，通过为每个粒子设置不同的 translate 值，就能模拟出360度散开的效果。你可以用一点三角函数来计算这些值，让分布更均匀。

4. 性能优化与创意组合：让烟花动效既炫又稳

效果做出来了，但如果页面上同时放十几个这样的烟花，会不会卡？这是必须考虑的问题。CSS动画性能很好，但滥用也会出问题。我踩过的坑告诉我，优化要从这几方面入手：

第一，优先使用 transform 和 opacity。 浏览器对这两个属性的动画做了高度优化（通常能触发GPU硬件加速），因为它们不影响文档布局。相比之下，改变 width、height、top、left 来制作动画会触发昂贵的布局计算和重绘，性能要差很多。我们的烟花动画全程只用到了 transform (scale, translate) 和 opacity，这本身就是最佳实践。

第二，减少不必要的图层和复杂度。 每个动画元素都会创建一个新的复合图层。图层不是越多越好，管理过多图层同样消耗资源。对于粒子，我们可以考虑使用 box-shadow 来生成多个光点，而不是创建无数个 <div>。例如，一个元素可以通过 box-shadow: 0 0 5px #ff0, 10px 10px 5px #f00, -10px -10px 5px #00f; 同时模拟出几个不同位置的色点，但这需要精细控制。

第三，使用 will-change 属性提示浏览器。 对于我们知道即将发生复杂动画的元素，可以提前告诉浏览器：“嘿，这个元素接下来要变，你准备一下。” 比如，给 .particle 类加上 will-change: transform, opacity;。但切记不要滥用，给太多元素或过早添加 will-change 反而会浪费内存。通常只给那些确实在持续动画的元素使用。

创意组合方面， 单一的烟花再美也单调。我们可以结合多个动画，创造出更丰富的场景：

• 连环烟花： 用一个烟花容器的动画延迟，控制第一个烟花绽放后，第二个、第三个依次升空。这只需要给每个 .firework 容器设置不同的 animation-delay。
• 交互触发： 把烟花的初始状态设置为 animation-play-state: paused;，然后用 :hover 或者JavaScript在按钮点击时改为 animation-play-state: running;。这样烟花就可以由用户鼠标悬停或点击来触发，互动感十足。
• 背景星空： 在黑色的背景上，用大量静态的、微微闪烁（animation 改变 opacity 从0.3到1）的小圆点模拟星空，再把烟花放在其中，氛围感立刻拉满。闪烁动画要用很长的周期（比如5s）和 alternate 方向，让它自然柔和。

最后，调试动画节奏是个细活。我习惯在浏览器的开发者工具里，直接拖拽 @keyframes 的百分比滑块，实时看效果，调整 cubic-bezier() 函数，直到找到那种“嘭”一下炸开然后又优雅散开的感觉。记住，好的动画是物理的、有情绪的，而CSS3给了我们足够多的工具去模拟这种情绪。多试，多调，你的烟花一定能点亮整个页面。