animation-delay负值妙用，你不来了解一下吗

Posted 2022-11-12 战场小包

🎄前言

小包上一篇文章讲述如何实现随机不规则圆角头像时，其中一种方案通过妙用 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 负值的特性:

1. animation-delay 设置负值的动画会立即执行
2. 负值设置多少，动画跳过多少秒进入动画周期。以上面案例为例子，设置 -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 效果

如果感觉有帮助的话，别忘了给小包点个 ⭐ 。

💥 后语

伙伴们，如果大家感觉本文对你有一些帮助，给阿包点一个赞👍或者关注➕都是对我最大的支持。

另外如果本文章有问题，或者对文章其中一部分不理解，都可以评论区回复我，我们来一起讨论，共同学习，一起进步！