动画延迟负值，你知道？用处大着嘞！

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，邀你进群，一起学习交流前端，成为更优秀的工程师～关注公众号：半夏话前端,了解更多前端知识！点我探索新世界！

前言

在上一篇文章 《纯CSS 快闪文字效》 中，主要使用延迟动画，实现文字的逐渐消失的效果，不过我在实现上面的效果之后，发现了一个问题，如果我想重复的快闪，此时是不支持的。此时前面的文字可能都到N个循环了，但是后面的文字还是N-*个循环。

怎么解决呢？既然正着的延迟执行实现不了，那么负值可以嘛？

在CSS中animation-delay可以设置为负值，大家熟知的是正值是延迟执行，这里负值的是立即执行。而且根据动画执行时间和动画延迟负值。动画会立即执行其中的某一帧。

负值延迟

animation-delay: -4s;

负值延迟倒是会出现什么效果？我能明确的就是动画立即执行。不过他到底选择的是哪一帧？

我们通过一个小例子来明确！

这里我们设置文本颜色随着时间改变，这里将整个动画持续时间设置为10秒，动画分为5段。每一段是一个颜色。

这里我们可以设置animation-delay的值为-10到-1 ，然后看一下不同值下的开始颜色。

  p{
  animation: colorChange 10s  infinite ease-in-out;
}
@keyframes colorChange{
 0%{
     color: rgb(43, 255, 0);
    }
    20%{
        color: orange;
    }
    40%{
        color: rgb(195, 0, 255);
    }
    60%{
        color: rgb(255, 0, 0);
    }
    80%{
        color:rgb(0, 255, 221);
    }
    100%{
        color: black;
    }
}

首先是-10

这里我们动画持续时间是10秒，动画是20%的等差。我们又可以将动画分成10%的等差。

下面我们来看一下动画演示。

当我们点击动画前面的checkbox的时候，字体的颜色变成color: rgb(43, 255, 0);，也就是绿色。立即变成绿色，说明动画立即开始了，同时动画处于0-20%之间的某一个位置。对于这个位置大家可能有点想法了，但是还不确定！好，再来一个例子。

接下来是-7秒

为啥不是-9 -8 ，连续的可能就看不太出来了。、

当启用动画时，字体颜色突然变成 color:rgb(0, 255, 221);，也就是80%-100%之间的的颜色。

其实到这里我已经偷的添加。-10s时0的颜色，并不是100%的黑色。-7秒时80%的颜色，并不是70%的红色。

结论：动画延迟负值，表示从负值绝对值的下一秒开始执行。也就是-10，执行0秒。-7 执行8秒。，当然这只是我的记忆方法。可能表述是有问题的。

快闪文字的bug解决

在文章开始，已经聊过了现状，我直接上代码了。

在快闪文字那篇文章中，我们设置的动画持续时间是1s。这里我们设置的是6秒,同时动画的延迟也是从-1 的等差。

       animation: text 6s infinite ease-in-out;
      }
      .text:nth-child(1) {
        animation-delay: -6s;
      }
      .text:nth-child(2) {
        animation-delay: -5s;
      }
      .text:nth-child(3) {
        animation-delay: -4s;
      }
      .text:nth-child(4) {
        animation-delay: -3s;
      }
      .text:nth-child(5) {
        animation-delay: -2s;
      }
      .text:nth-child(6) {
        animation-delay: -s;
      }

这个时候我们的动画也需要改变，这里我们设置了等分的点，0和100%为不透明。17%（100/6）为不透明

   @-webkit-keyframes text {
        0%,
        
        100% {
          filter: blur(0px);
          opacity: 1;
        }
        17%,
       {
          filter: blur(1em);
          opacity: 0;
        }
      }

这里为啥是17%，因为动画是6秒，设置17%是大概一秒的位置。

第一个文字是-6秒也就是，也就是跳过6秒，从0开始，此时文字不透明。一秒后是不透明，持续5秒的透明。

第二个文字是-5秒，也就是从第6秒开始，此时文字是透明，等1秒后变成不透明，持续1秒不透明，然后下面接着透明！

请注意，动画延迟负值，动画会立即执行！所以第一个文字的动画和第二个文字的动画是一起执行的。第一个文字不透明到透明是一秒，第二个文字的透明到不透明也是一秒。所以第一个文字消失，第二个文字出现。