上一讲，《CSS关键帧动画：元素绕椭圆圆周运动的实现（一）》，我们用两个CSS属性 ① offset-path 设计路径、② offset-distance 控制元素在路径上的偏移位置，实现了绝对定位的子元素在相对定位的父元素场景下做椭圆运动。椭圆运动往往能模拟出一定效果的3d运动，为了让效果显得更生动逼真，我们还需要让运动中的元素在运动周期中能变小变大，规则是，元素离观测点最近时最大、反正最小。椭圆路径始于左中（M0 120），按顺时针方向运动，移动到 25% 即椭圆的最顶端时离我们的眼睛（观测点）最远，到 50% 即右中时和出发点同在一个水平位置，到 75% 即最底端时离我们最近。按这个规律，我们设计一组CSS关键帧动画，就叫它 size 吧，用来控制元素在移动时的尺寸变化：

这里，我们设计了三种变化状态，最小 0.5，最大 1.5，正常 1，分别对应于运动路径上的 ① 0%、50%、100%，② 25%，③ 75%，然后将这个动画追加给 li-zi 的 animation 属性——我们早已知道，animation 属性支持多个关键帧动画。下面是效果和代码：
 

留意观察第 16 行代码，animation属性调用了两个关键帧动画，彼此间用小角逗号隔开，两组动画的运行参数保持一致以确保动作协调。

以上只是一个 li-zi 元素实例的运动展示，如果是多个元素前后拉开距离在同一个跑道上运动，那又如何实现呢？思路其实也简单：利用 animation-delay 实现，该属性表示动画延时执行的时间，使用负值表示提前执行。下面的实例，我们利用 JS 批量生成 12 个 li-zi 元素，每一个 li-zi 元素背景色随机产生，animation-delay 属性值取负数值，按照动画总时长除以 li-zi 总数乘以序列 id (具体看第36行代码）以便让小矩形在路径上均匀分布。

效果：

完整代码：

注意，第 36 行代码，10 来源于 animation 属性中设置的 animation-duration 即第 16 行代码中的 10s，这个数值若发生变化这里也要跟着改。

这里只是演示，实际应用时应当根据需要做必要的修改，反正万变不离其宗，懂得做的都会懂。