动画延迟负值,你知道?用处大着嘞!

3,092 阅读4分钟

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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%的等差。

image-20211113191900527

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

延迟-10秒

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

接下来是-7秒

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

动画延迟-7秒

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

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

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

快闪文字的bug解决

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

image-20211113195738893

在快闪文字那篇文章中,我们设置的动画持续时间是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%是大概一秒的位置。

image-20211113195422074

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

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

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

动画延迟-bugjiejue.gif