This is the 10th day of my participation in the August More Text Challenge. For details, see:August is more challenging

preface

Hello! Friend!!!

Thank you very much for reading this article. If there are any mistakes in this article, please point them out

ଘ(੭ straddle ᵕ)੭

Nickname: Sea Bombing

Tags: program ape | C++ contestant | student

Introduction: Got acquainted with programming because of C language, then transferred to computer major, honored to win national award, provincial award and so on, has been recommended for research. Currently learning C++/Linux (really, really hard ~)

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

[Animation Eliminating joy] Usually learning life is boring, inadvertently to some web pages, application transition/loading animation generated a strong interest, want to know how to achieve the specific? Then in the idle time to learn how to use CSS to achieve some simple animation effects, the article is only for their own study notes, record learning life, to understand the principle of animation, more “eliminate” animation!

Results show

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><span></span></section>
</body>
</html>
Copy the code

CSS

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

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

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

span {
  width: 36px;
  height: 36px;
  display: inline-block;
  position: relative;
  background: white;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% {
    transform: translate(0.0) rotateX(0) rotateY(0)}25% {
    transform: translate(100%.0) rotateX(0) rotateY(180deg)}50% {
    transform: translate(100%.100%) rotateX(-180deg) rotateY(180deg)}75% {
    transform: translate(0.100%) rotateX(-180deg) rotateY(360deg)}100% {
    transform: translate(0.0) rotateX(0) rotateY(360deg)}}Copy the code

Knowledge involved (need to know)

Transform property

  • Translate: Define a 2D conversion
  • RotateX: 3D rotation along the X-axis
  • RotateY: 3D rotation along the Y-axis

The principle,

Step 1

Using the span tag, set to

  • Width and height are 36px
  • Relative positioning
  • Background color: white
span {
  width: 36px;
  height: 36px;
  position: relative;
  background: white;
}
Copy the code

The renderings are shown below

Step 2

Adding an animation to span has 5 keyframes

Frame 1 (initial state)

  • Two dimensional space: right shift: 0 down: 0
  • Three dimensional space: 0 degrees rotation about the X-axis and 0 degrees rotation about the Y-axis
 transform: translate(0, 0) rotateX(0) rotateY(0)
Copy the code

Frame 2 (relative to initial state)

  • In two dimensions: Right: 100% Down: 0 (100% is relative to its size, if it is 100px wide then move it by 100px)
  • Three dimensional space: 0 degrees rotation about the X-axis 180 degrees rotation about the Y-axis
transform: translate(100%, 0) rotateX(0) rotateY(180deg)
Copy the code

The effect of the transition from the first frame to the second frame is shown below

Frame 3 (relative to initial state)

  • Two dimensional space: Right shift: 100% Down: 100%
  • Three dimensional space: -180 degrees rotation about the X-axis 180 degrees rotation about the Y-axis
  transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
Copy the code

The effect of the transition from the second frame to the third frame is shown below

Frame 4 (relative to initial state)

  • Two dimensional space: Right shift: 0 Down: 100%
  • Three dimensional space: -180 degrees about the X-axis 360 degrees about the Y-axis
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
Copy the code

The effect of the transition from the third frame to the fourth frame is shown below

Frame 5 (relative to initial state)

  • Two dimensional space: right shift: 0 down: 0
  • Three dimensional space: 0 degrees rotation about the X-axis 360 degrees rotation about the Y-axis
transform: translate(0, 0) rotateX(0) rotateY(360deg)
Copy the code

The effect of the transition from frame 4 to frame 5 is shown below

In summary, the animation code is:

animation: loading 2s linear infinite;
Copy the code
@keyframes loading {
  0% {
    transform: translate(0, 0) rotateX(0) rotateY(0)
  }
  25% {
    transform: translate(100%, 0) rotateX(0) rotateY(180deg)
  }
  50% {
    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
  }
  75% {
    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
  }
  100% {
    transform: translate(0, 0) rotateX(0) rotateY(360deg)
  }
}
Copy the code

The final renderings are shown below

conclusion

Study Reference:

Codepen. IO/bhadupranja…

The article is only a study note, recording a process from 0 to 1

Hope to be helpful to you, if there is a mistake, welcome friends to correct ~

My name is haihu ଘ(੭ ᵕ)੭. If you think it is ok, please give me a like

Thanks for your support ❤️