preface

This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕ like 👍 plus my wechat: FrontendPicker, invite you to join the group, learn to communicate frontend, become a better engineer ~ follow the public number: Banxia words frontend, learn more frontend knowledge! Click me to explore a new world!

Negative delay

animation-delay: -4s;
Copy the code

What would a negative delay do? All I know for sure is that the animation executes immediately. But which frame did he choose?

Let’s make it clear with a small example!

Here we set the text color to change over time, here we set the duration of the entire animation to 10 seconds, and the animation is divided into five segments. Each paragraph is a color.

Here we can set the animation-delay value to -10 to -1 and see the starting color at different values.

  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; }}Copy the code

The first is to 10

Here we have an animation duration of 10 seconds, and the animation is 20% equal. Again, we can divide the animation into 10% equivalents.

Let’s take a look at the animation.

When we click on the checkbox before the animation, the font color changes to color: RGB (43, 255, 0); That’s green. If it turns green immediately, the animation starts immediately and is somewhere between 0 and 20%. You might have some ideas about this location, but you’re not sure yet! Ok, one more example.

And then minus 7 seconds

Why isn’t it negative 9, negative 8? Well, it’s a little hard to see consecutively. ,

When animation is enabled, the font color suddenly changes to color: RGB (0, 255, 221); That is, between 80% and 100%.

Actually up to here I have stolen the addition. The color of 0 at -10s is not 100% black. -7 seconds 80% color, not 70% red.

Conclusion: Animation delay is negative, which means execution starts from the next second of negative absolute value. So -10, 0 seconds. -7 Run for 8 seconds. Of course, this is just my way of remembering. Maybe there’s something wrong with the statement.

Flash text bug resolved

At the beginning of this article, I talked about the status quo, so I went straight to the code.

In the flash text article, we set the animation duration to 1s. Here we set it to 6 seconds, and the animation delay is equal to -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;
      }
Copy the code

At this point our animation also needs to change. Here we set the points of equal division, 0 and 100% opacity. 17% (100/6) are opaque

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

Why is it 17%? Because the animation is 6 seconds, and setting 17% is about one second.

The first text is going to be minus 6 seconds which is, skip 6 seconds, starting at 0, so the text is not transparent. After one second it is opaque, transparent for five seconds.

The second text is -5 seconds, that is, from the sixth second, the text is transparent, wait for 1 second and then become opaque, opaque for 1 second, and then transparent!

Note that the animation delay is negative and the animation executes immediately! So the animation of the first text and the animation of the second text are executed together. The opacity to opacity of the first text is one second, and the opacity to opacity of the second text is one second. So the first word disappears and the second word appears.