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

background

Learning the front end of three months, ready to brush interview questions, summary summary, a few interview questions a day, to the big factory.

The problem

How to set the animation to play in real time, the start position of the animation to a certain stage?

parsing

Let’s use an animation to explain how we can make an animation play in real time.

We looked at this animation and felt whether we could achieve it ourselves, without any technical difficulty. Let’s see what most of us do

<! DOCTYPEhtml>
<html lang="en">

<head>
    
    <style>
        .loading {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 200px auto;
        }

        .loading i {
            display: inline-block;
            border-left: 8px solid red;
            height: 20px;
            animation: scaleUp 4slinear infinite alternate; } // The second node delays playback1s
        .loading i:nth-child(2) {
            animation-delay: 1s; } // The third node delays playback2s
        .loading i:nth-child(3) {
            animation-delay: 2s; } // The fourth node delays playback3s
        .loading i:nth-child(4) {
            animation-delay: 3s;
        }

        @keyframes scaleUp {
            to {
                transform: scaleY(5); }}</style>
</head>
<body>
    <div class="loading">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</body>
</html>

Copy the code

The audio waveform is made up of rectangles, each of which has a vertically scaled animation effect. If you want to create a rising and falling animation effect, you can set a delay for each rectangle.

Let’s look at this effect animation:

We should find the problem, because the animation delay is set, behind the rectangle is the default height, no jagged effect!

The key to solving this problem is to change all the delayed practices into negative numbers

      .loading i:nth-child(2) {
            animation-delay: -1s;
        }

        .loading i:nth-child(3) {
            animation-delay: -2s;
        }

        .loading i:nth-child(4) {
            animation-delay: -3s;
        }
Copy the code

This not only preserves the delay time difference, but also realizes the animation to play immediately, and the rectangle height is not the same.

Understand animation negative values in depth

You might think you understand negative animation, but what about this?

<head>
    
    <style>
        .ele{// this is negative -0.25 s
            animation: fadeIn 1s linear -0.25 s;
        }
        @keyframes fadeIn {
            0% {
                option: 0// Transparency from0Start}100% {
                option: 1}}</style>
</head>
<body>
    <div class="ele">
    </div>
</body>
Copy the code

Let’s look at the code above, let’s guess the initial position of the animation, how much does the opacity start?

  1. 0.75
  2. 0.25

Answer: 0.25

Did many people guess wrong again, think it should be 0.75.

This is because in many languages, negative values are moved forward in time, giving the impression of moving 0.25 seconds forward from transparency 1, resulting in 0.75!

A lot of people make mistakes here, so remember that.

conclusion

One step at a time, solid work!