How to use CSS and GSAP to implement continuous animation with multiple keyframes (source code attached)-CSS Tutorial-php.cn

The content of this article is about how to use CSS and GSAP to implement continuous animation with multiple key frames (source code attached). It has certain reference value. Friends in need can refer to it. Hope it helps.

Effect preview

Source code download

https://github.com/comehope/front- end-daily-challenges

Code interpretation

Define dom, the container contains 10 p sub-elements, each p contains 1 span Element:

<figure class="container">
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
</figure>

Copy after login

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightyellow;
}

Copy after login

Define the size and style of the container:

.container {
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, tomato, gold);
    border-radius: 3%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

Copy after login

Draw 1 element in the container, it There is a shell p, and inside is a small white square span:

.container {
    position: relative;
}

.container p {
    position: absolute;
    width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container p span {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: white;
}

Copy after login

Define subscript variables for the elements in the container, and let the element's shell rotate in turn , forming a circle, in which outline is the auxiliary line:

.container p {
    outline: 1px dashed black;
    transform: rotate(calc((var(--n) - 1) * 36deg));
}

.container p:nth-child(1) { --n: 1; }
.container p:nth-child(2) { --n: 2; }
.container p:nth-child(3) { --n: 3; }
.container p:nth-child(4) { --n: 4; }
.container p:nth-child(5) { --n: 5; }
.container p:nth-child(6) { --n: 6; }
.container p:nth-child(7) { --n: 7; }
.container p:nth-child(8) { --n: 8; }
.container p:nth-child(9) { --n: 9; }
.container p:nth-child(10) { --n: 10; }

Copy after login

At this point, the drawing of the sub-elements is completed, and then the animation script begins.
Introduce the GSAP library:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

Copy after login

Define a variable to represent the sub-element selector:

let elements = &#39;.container p span&#39;;

Copy after login

Declare a timeline object:

let animation = new TimelineMax();

Copy after login

Set the entry method first To change from small (frame 1) to large (frame 2), there is no code for frame 2. It is implicit in the semantics:

animation.from(elements, 1, {scale: 0});

Copy after login

Let the child elements become vertical strips, Spread out in all directions (frame 3):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25});

Copy after login

Let the vertical bars rotate into small squares (frame 4):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180});

Copy after login

Let the small squares turn into horizontal bars, surrounding Form a circle (frame 5):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1});

Copy after login

Note that because scrimba will crash when recording too many frames, frames 6 to 11 are not reflected in the video.
Let the circle converge inward and the line become thinner (frame 6):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1});

Copy after login

Let the line swing to the left (frame 7):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;});

Copy after login

Let the line swing to the right again Swing (Frame 8):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;});

Copy after login

Then change the horizontal line into a vertical line. The shape is similar to that in Frame 3, except that the line is thinner and more convergent (Frame 9):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;})
    .to(elements, 1, {x: &#39;0&#39;, scaleX: 0.1, scaleY: 1});

Copy after login

Then change the vertical line into a horizontal line. The shape is similar to the 5th frame, but the line is shorter (10th frame):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;})
    .to(elements, 1, {x: &#39;0&#39;, scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})

Copy after login

The horizontal line spreads out slightly and becomes a dot (11th frame) ):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;})
    .to(elements, 1, {x: &#39;0&#39;, scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'});

Copy after login

Let the dots deform into vertical lines and shrink inward. The distance of this change is long, so the animation time should be longer (frame 12):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;})
    .to(elements, 1, {x: &#39;0&#39;, scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'})
    .to(elements, 1, {y: '-10px', scaleX: 0.1, scaleY: 0.5, borderRadius: '0%', rotation: 0});

Copy after login

Let the dots be vertical The lines spread rapidly from the center outwards, pausing for a moment before spreading, as if the lines are being emitted (frame 13):

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;})
    .to(elements, 1, {x: &#39;0&#39;, scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'})
    .to(elements, 1, {y: '-10px', scaleX: 0.1, scaleY: 0.5, borderRadius: '0%', rotation: 0})
    .to(elements, 1, {y: '-300px', delay: 0.5});

Copy after login

Use the time scale scaling function to double the animation playback speed:

animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: &#39;-100px&#39;, scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: &#39;-60px&#39;, scaleY: 0.1})
    .to(elements, 1, {x: &#39;-30px&#39;})
    .to(elements, 1, {x: &#39;30px&#39;})
    .to(elements, 1, {x: &#39;0&#39;, scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: '-80px', scaleY: 0.5, borderRadius: '50%'})
    .to(elements, 1, {y: '-10px', scaleX: 0.1, scaleY: 0.5, borderRadius: '0%', rotation: 0})
    .to(elements, 1, {y: '-300px', delay: 0.5})
    .timeScale(2);

Copy after login

Modify the code that declares the timeline to make the animation play repeatedly:

let animation = new TimelineMax({repeat: -1, repeatDelay: 1});

Copy after login

At this point, the animation is completed.
Hide the content outside the container and delete the auxiliary lines;

.container {
    overflow: hidden;
}

.container p {
    /* outline: 1px dashed black; */
}

Copy after login

Finally, decorate the corners of the page:

body {
    overflow: hidden;
}

body::before,
body::after {
    content: &#39;&#39;;
    position: absolute;
    width: 60vmin;
    height: 60vmin;
    border-radius: 50%;
    background: radial-gradient(
        transparent 25%,
        gold 25%, gold 50%,
        tomato 50%
    );
}

body::before {
    left: -30vmin;
    bottom: -30vmin;
}

body::after {
    right: -30vmin;
    top: -30vmin;
}

Copy after login

You’re done!

Related recommendations:

How to use pure CSS to achieve the effect of a pair of scissors (source code attached)

How to use pure CSS to achieve stripes Illusion animation effect (with source code)

The above is the detailed content of How to use CSS and GSAP to implement continuous animation with multiple keyframes (source code attached). For more information, please follow other related articles on the PHP Chinese website!