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

最新推荐文章于 2024-05-06 19:28:55 发布

战场小包

最新推荐文章于 2024-05-06 19:28:55 发布

阅读量3.4k

点赞数 21

分类专栏： JavaScript 酷炫的css 文章标签：动画 css3 css

本文链接：https://blog.csdn.net/qq_32036091/article/details/121928396

版权

JavaScript 同时被 2 个专栏收录

21 篇文章 14 订阅

订阅专栏

酷炫的css

1 篇文章 0 订阅

订阅专栏

🎄前言

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