这个动画代码可以优化一下

上周我们一周都在系统学习 CSS 动画，学习了 让按钮“呼吸”一会（呼吸动画）、跳动的音符动画实现原理剖析、动画阶段 · 小程序向上弹出动画效果，其中在 跳动的音符动画实现原理剖析 这节内容中我发现其实可以优化一下代码，优化后代码更通用，更容易抽离成组件。动画是这样的：

下面这段代码，有两个缺点：

1、from 在这个场景下完全没必要，可以直接删掉。如果未指定 from 时，@keyframes 会以元素目前已有的样式来开始；

2、高度直接写死了，完全可以更灵活一些；在整个动画中，高度之间的变化可以通过最高高度乘以一个比例来实现，比如 170*0.3；

优化后代码如下：

说到高度，下面这段代码有有问题，直接写死了高度，也需要优化一下：

可以优化为：

这样修改后，可以更容易把这个动画抽离成一个组件，高度由使用者直接控制就好。能够做到这样的优化，其实归功于函数 calc。

对了，今天是父亲节，祝你的父亲节日快乐（没错，说的就是你，都看到这里了）。

---

推荐阅读：

网易云音乐背景高斯模糊探索