🎄前言
小包上一篇文章讲述如何实现随机不规则圆角头像时，其中一种方案通过妙用
animation-delay 负值和 paused 进行实现，这不由让我对 animation-delay 负值产生巨大兴趣，经过几天的学习，我发现 animation-delay 负值的独特特性带来的威力真是非同小可。
学习本文章，你会学会:
animation-delay负值特性animation-delay负值实现 bounce loading 效果animation-delay负值实现 音浪 loading 效果
💫 误区
为了更好的学会 animation-delay 负值效果，我翻看了好多大佬的博客，但我发现很多大佬对 animation-delay 设置的时间理解存在误区。
问题是这样的: 设置 animation-duration: 5s ，再设置 animation-delay: -1s ，那么请问当前动画起始位置是正常执行的 1s 还是 4s 或者是别的时间点 ？
光说不练假把式，我们来实例检验一下，为了更直观的观察到结果，动画采用 linear 匀速模式，并且使用 paused 暂停动画，使动画停留在初始位置。
- 创建
div，初始宽高为0，背景颜色#000 - 添加
keyframe动画，100%宽高扩展为500px
@keyframes extend { 0% { width: 0; height: 0; } 100% { width: 500px; height: 500px; } } 复制代码
- 设置
animation和animation-delay
animation: extend 5s linear paused; animation-delay: -1s; /* animation-delay: -2s; */ 复制代码
当设置 animation-delay 为 -1s 时，div 初始状态为 100px*100px；设置为 -2s 时，div 初始状态为 200px*200px
📜 animation-delay 负值总结
通过上面的实例，我们可以总结出 animation-delay 负值的特性:
animation-delay设置负值的动画会立即执行- 负值设置多少，动画跳过多少秒进入动画周期。以上面案例为例子，设置
-1s时，动画就会从1s开始执行
那 animation-delay 会有何妙用那？
🏓 bounce loading
bounce loading 效果大致可以见下图
当前 loading 效果，共有两个动画组成: 小球放大缩小动画和整体旋转的动画。
小球放大缩小动画为 scale(0) -> scale(1) -> scale(0)，两小球的初始位置分别为 scale(0) scale(1)，两球动画同时启动。
未学习 animation-delay 负值之前，为使两球同时执行动画，因此需要编写两个动画。
.bubble-1 { animation: bounce 2s ease-in-out infinite; } .bubble-2 { animation: bounce2 2s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } @keyframes bounce2 { 0%, 100% { transform: scale(1); } 50% { transform: scale(0); } } 复制代码
我们从上面的代码可以看出，bounce 和 bounce2 的代码是高度重复的，只不过颠倒了起始位置，那这样设立两组动画未免有几分多余。
咱们来回想一下 animation-delay 负值的特点: 立即执行动画；负值设置多少，动画跳过多少秒进入动画周期。
这不是恰好与上面的需求契合吗？
.bubble-1, .bubble-2 { animation: bounce 2s ease-in-out infinite; } .bubble-2 { animation-delay: -1s; } 复制代码
动画执行时间为 2s ，设置 bubble-2 delay 值为 -1s ，那么 bubble-2 便从 1s 开始执行，这不就实现 bounce loading 效果了吗？
🎶 音浪loading效果
上面只有两个小球， delay 负值的强大之处没有完全展现，下面来个狠的，音浪 loading 效果的初始状态和动画效果见下图
音浪效果共有 15 个矩形组成，矩形的动画效果是纵向放大与缩小，每个矩形的初始位置不同。
矩形太多了，每个矩形都写一组动画不现实。一方面写起来太繁琐，二是动画的衔接性未必好。
大家有可能会想到另外一个方案，设置 animation-delay 正值来设置每个矩形的延迟时间，但正值没有负值立即执行的特性，初始位置会存在问题。
接下来让我们看看 animation-delay 负值的威力吧
/* load 动画 */ @keyframes load { 0% { background: #531430; transform: scaleY(0.08); } 50% { background: #e04960; transform: scaleY(1); } 100% { background: #531430; transform: scaleY(0.08); } } .loader span { /* 动画持续时间为2.5s */ animation: load 2.5s infinite linear; } /* 设置 animation-delay 负值 */ .loader span:nth-child(1), .loader span:nth-child(15){ animation-delay: -1.1s; } .loader span:nth-child(2), .loader span:nth-child(14) { animation-delay: -1.3s; } .loader span:nth-child(3), .loader span:nth-child(13) { animation-delay: -1.5s; } .loader span:nth-child(4), .loader span:nth-child(12) { animation-delay: -1.7s; } .loader span:nth-child(5), .loader span:nth-child(11) { animation-delay: -1.9s; } .loader span:nth-child(6), .loader span:nth-child(10) { animation-delay: -2.1s; } .loader span:nth-child(7), .loader span:nth-child(9) { animation-delay: -2.3s; } .loader span:nth-child(8) { animation-delay: 0s; } 复制代码
不知道大家体会到 animation-delay 负值的强大之处吗？
🛕 源码仓库
传送门: animation-delay 负值实现 loading 效果
如果感觉有帮助的话，别忘了给小包点个 ⭐ 。
