This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

preface

Hello! Friend!!!

Thank you very much for reading haihong’s article, if there are any mistakes in the article, please point out ~

 

Self-introduction ଘ(੭, ᵕ)੭

Nickname: Haihong

Tag: programmer monkey | C++ contestant | student

Introduction: because of the C language acquaintance programming, then transferred to the computer major, had the honor to win the national award, provincial award and so on, has guaranteed graduate school. Currently learning C++/Linux (really really hard ~)

Learning experience: solid foundation + more notes + more code + more thinking + learn English well!

[Animation Xiao Xiao Le] Usually study life is rather boring, inadvertently in some web pages, applications transition/loading animation developed a strong interest, want to know how to achieve the specific? Then in the free time to learn how to use CSS to achieve some simple animation effects, the article is only for their own learning notes, record learning life, strive to understand the principle of animation, a lot of “eliminate” animation!

Results show

For a close-up

The Demo code

HTML

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

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>

    <body>
        <section>
            <div class="box">
                <div class="cube"></div>
                <div class="shadow"></div>
            </div>
        </section>
    </body>

</html>
Copy the code

CSS

html.body {
	margin: 0;
	height: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ed556a;
	overflow: hidden;
}

section {
	width: 650px;
	height: 300px;
	padding: 10px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid white;
	overflow: hidden;
}

.box {
	animation: run 8s linear infinite;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.cube {
	width: 50px;
	height: 50px;
	background: #fff;
	animation: loading .5s linear infinite;
	border-radius: 3px;
}

.shadow {
	width: 50px;
	height: 5px;
	background: # 000;
	opacity:.2;
	border-radius: 50%;
	margin-top: 9px;
	animation: shadow .5s linear infinite;
}

@keyframes run {
	0% {
		left: -100%;
	}
	100% {
		left: 110%; }}@keyframes loading {
	17% {
		border-bottom-right-radius: 3px;
	}
	25% {
		transform: translateY(9px) rotate(22.5 deg);
	}
	50% {
		transform: translateY(18px) scale(1.9) rotate(45deg);
		border-bottom-right-radius: 40px;
	}
	75% {
		transform: translateY(9px) rotate(67.5 deg);
	}
	100% {
		transform: translateY(0) rotate(90deg); }}@keyframes shadow {
	50% {
		transform: scale(1.2.1); }}Copy the code

The principle,

Step 1

You can see that in the renderings

The whole animation consists of two parts: white square + dark shadow

So we use a div box to contain both parts

Among them

  • The Cube class represents a white square
  • The shadow class represents a dark shadow
            <div class="box">
                <div class="cube"></div>
                <div class="shadow"></div>
            </div>
Copy the code

Step 2

Set the box class to

  • Relative positioning
  • Using Flex layout
  • The element is centered up, down, left, and right
  • Column arrangement (such that cube is on top and shadow is on bottom)
.box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
Copy the code

Step 3

Set up the cube

  • The width and height are 50px
  • Background color: white
  • border-radius: 3px;
.cube {
	width: 50px;
	height: 50px;
	background: #fff;
	border-radius: 3px;
}
Copy the code

The renderings are as follows

Step 4

Set the shadow

  • The width is 50px and the height is 5px
  • Background color: black
.shadow {
	width: 50px;
	height: 5px;
	background: # 000;
}
Copy the code

The renderings are as follows

Drop shadow down another 9px

	margin-top: 9px;
Copy the code

The renderings are as follows

Then set border-radius to 50%

	border-radius: 50%;
Copy the code

The renderings are as follows

Lower the shadow color opacity

opacity:.2;
Copy the code

The renderings are as follows

Step 5

Animate cube

You can see that from the very beginning

  • The Cube itself is constantly rotating (2D)
  • When one of the four corners touches the bottom, it becomes more rounded.
  • We’re also moving up and down in the y direction

Results show

Divide the animation into 5 frames

The first frameThat’s the initial state The second frame

  • Move 9px in the y direction
  • Rotation 22.5 degrees (relative to initial position)
transform: translateY(9px) rotate(22.5 deg);
Copy the code

The renderings are as follows

Frame 3 (Keyframe)

  • Move down the y axis by 18px
  • Rotate itself 45 degrees (relative to initial position)
  • Size scaling: the X-axis direction remains unchanged and the Y-axis shrinks to 0.9 times of the original
  • At the same time, change the border-radius in the lower right corner to 40px and the RADIUS in the other three corners remain unchanged
		transform: translateY(18px) scale(1.9) rotate(45deg);
		border-bottom-right-radius: 40px;
Copy the code

The renderings are as follows

Note:border-bottom-right-radius: 40px;Radius: Set the radius in the lower right corner to 40px

The fourth frame

  • I’m only going to move down 9px in the y direction (i.e. up 9px after frame 3)
  • Rotation 67.5 degrees relative to initial position (relative to initial position)
transform: translateY(9px) rotate(67.5 deg);
Copy the code

The renderings are as follows The fifth frame

  • 0px moving in the y direction
  • Rotation Angle 90 degrees (relative to initial position)
transform: translateY(0) rotate(90deg);
Copy the code

The renderings are as follows

Get the cube animation CSS code

.cube {
	animation: loading .5s linear infinite;
}

@keyframes loading {
	17% {
		border-bottom-right-radius: 3px;
	}
	25% {
		transform: translateY(9px) rotate(22.5 deg);
	}
	50% {
		transform: translateY(18px) scale(1.9) rotate(45deg);
		border-bottom-right-radius: 40px;
	}
	75% {
		transform: translateY(9px) rotate(67.5 deg);
	}
	100% {
		transform: translateY(0) rotate(90deg); }}Copy the code

The renderings are as follows

Step 6

Add animation for Shadow

This one is relatively simple

You just need the shadows to get bigger and smaller over time in the x direction

.shadow {
	animation: shadow .5s linear infinite;
}
@keyframes shadow {
	50% {
		transform: scale(1.2.1); }}Copy the code

The renderings are as follows

Step 7

When both cube and shadow animations are active at the same time

Step 8

In order to achieve the effect of blocks running from left to right

Just set up an animation in box

The effect is described as follows:

  • Initial position left: -100%;
  • End position left: 110%;
@keyframes run {
	0% {
		left: -100%;
	}
	100% {
		left: 110%; }}Copy the code

The renderings are as follows

Remember to set the parent element in boxoverflow: hidden;

conclusion

The essay is just a study note, recording a process from 0 to 1

Hope to help you, if there is a mistake welcome small partners to correct ~

I am haihong ଘ(੭, ᵕ)੭

If you think it’s ok, please give it a thumbs up

Thanks for your support ❤️

Reference:

Codepen. IO / _fbrz/pen/m…