Annual report type page animation

1. Animation analysis

The animation on the annual report type page triggers the animation first on the first line of fonts, then the animation appears on the second line of fonts, and so on.

2. Animation writing method

1. Animation packaging

@keyframes identifier {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

2. Add animation

a. The first line of words

animation: identifier 1.5s linear 0s;

We add this linecss animation time1.5s 0sDelay is triggered directly after entering the page

b. The second line of characters

opacity: 0;
animation: identifier 1.5s linear 1.5s;

First we set up hiding, animation and delay for it1.5s  because we have to wait for the animation effect of the first line of words to be completed. Second OK, come out. Here, everyone looks at the time setting. Then use js to set the delayer

setTimeout(() => {
    this.$refs.xx.style.opacity = 1
}, 1500)

c. The third line of words

opacity: 0;
animation: identifier 1.5s linear 3s;

Wait until the effect of the second line of text is completed before the third line appears.

setTimeout(() => {
    this.$refs.xx.style.opacity = 1
}, 3000)

d. The nth line of characters

The following can be deduced by analogy