current position：Home>Make a small animation with pure CSS

Make a small animation with pure CSS

2021-08-26 20:09:54 【CSS drawing】

This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details ：8 Yuegengwen challenge

Origin of problem

I didn't know what to write a few days ago , Ask at boiling point XDM front end CSS What else is interesting to draw ：

CSS I don't know what to write , Brothers, give me a title

Several good brothers said , use CSS Make a little animation . Today, let's complete the following little wishes of brothers .

So how to use CSS Making animation ？

CSS Key attributes of animation ：transition-delay/animation-delay

Ruan Yifeng has an article in simple terms “CSS Introduction to animation ” In detail CSS All the details involved in the animation , In especial CSS Realize two important properties of animation ：

  1. transition
  2. animation

A key to continuous animation is how to connect multiple effects in a specified order ——transition-delay And animation-delay.

animation To solve the problem tansition Caused by some problems of , So we don't use transition While using animation To achieve our animation purpose .

CSS Animation key attributes ：@keyframes animation-name

Use animation after , We can pass in @keyframes animation-name Define multiple stages of an animation in , So as to achieve the animation effect .

What kind of animation to make ？

In the article “ pure CSS Draw Tai Chi diagram ” in , We drew a Tai Chi diagram , Only when the Tai Chi diagram rotates can it look good , therefore , Let the Tai Chi diagram rotate as the first animation effect in our animation ：

Animation .gif

What do we do for the second animation ？

Let's make the upper and lower circles on the Tai Chi diagram merge gradually towards the center , In order to achieve a similar reverse “ Taiji gives birth to Liangyi ”,“ Yin and Yang restore Tai Chi ”.

The final effect is as follows ：

Animation .gif

The source code is as follows .

<!DOCTYPE html>
<title> Taiji diagram </title>

<body class="my-body">
    <div class="taiji-left">
        <div class="taiji-top"></div>
    </div>
    <div class="taiji-right">
        <div class="taiji-bottom"></div>
    </div>
</body>
<style> body { width: 100vw; height: 100vh; background: lightblue; display: flex; flex-direction: row; align-items: center; justify-content: center; } .taiji-left { height: 400px; width: 200px; background: black; border-radius: 200px 0 0 200px ; position: relative; } .taiji-right { height: 400px; width: 200px; background: white; border-radius: 0 200px 200px 0; position: relative; } .taiji-top { border: 75px solid black; width: 50px; height: 50px; background: white; position: absolute; top: 0; right: -100px; border-radius: 50%; z-index: 2; } .taiji-bottom { border: 75px solid white; width: 50px; height: 50px; background: black; position: absolute; bottom: 0; left: -100px; border-radius: 50%; } .my-body { animation: rotate 5s linear forwards; } .taiji-top { animation-name: movetop, colorchangetop; animation-duration: 5s, 5s; animation-delay: 5s, 10s; animation-timing-function: linear, linear; animation-iteration-count: 1; animation-fill-mode: forwards; } .taiji-bottom { animation-name: movebottom, colorchangebottom; animation-duration: 5s, 5s; animation-delay: 5s, 10s; animation-timing-function: linear, linear; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes movetop { 0% { top: 0; } 100% { top: 100px; } } @keyframes movebottom { 0% { bottom: 0; } 100% { bottom: 100px; } } @keyframes colorchangetop { 0% { opacity: 1; } 100% { opacity: 0.5; } } @keyframes colorchangebottom { 0% { opacity: 1; } 100% { opacity: 0.5; } } </style>
</html>

 Copy code

summary

  1. You need to pay attention to the writing method when using two animations for the same component ： Not twice animation, Instead, you need to write the attributes of each animation separately and in turn , Such as ：
.taiji-bottom {
        animation-name: movebottom, colorchangebottom;
        animation-duration: 5s, 5s;
        animation-delay: 5s, 10s;
        animation-timing-function: linear, linear;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }
 Copy code
  1. The connection effect of animation uses animation-delay To ensure the order of execution .

copyright notice
author[CSS drawing],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826200951176b.html

The sidebar is recommended

guess what you like

Random recommended