[animation Xiaole] HTML+CSS custom loading animation 060

Posted by taurus5_6 on Fri, 11 Feb 2022 04:16:55 +0100

preface

Hello! buddy!
Thank you very much for reading Haihong's article. If there are mistakes in the article, you are welcome to point out ~
Self introduction ˊ ᵕ ˋ) ੭
Nickname: Haihong
Tag: program ape ｜ C + + player ｜ student
Introduction: I got acquainted with programming in C language and then transferred to computer major. I was lucky to have won national and provincial awards and have been guaranteed for research. Currently learning C++/Linux (really, really hard ~)
Learning experience: solid foundation + taking more notes + typing more codes + thinking more + learning English well!
Daily sharing: WeChat official account, Pro, recording life and learning tips.

[animation Xiaole] learning and life are boring at ordinary times. I inadvertently have a strong interest in the transition / loading animation of some web pages and applications. I want to know how to realize it? In my spare time, I will learn how to use css to achieve some simple animation effects. This article is only used as my own learning notes to record my learning life, strive to understand the principle of animation and "eliminate" animation!

Effect display

Demo code

HTML

<!DOCTYPE html>
<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>

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)
  }
}

Knowledge points involved (need to know)

In the transform attribute

translate: defines the 2D conversion
rotateX: 3D rotation along the X axis
rotateY: 3D rotation along the Y axis

➡️ explicate

Detailed explanation of principle

Step 1

Using the span tag, set to

The width and height are 36px
Relative positioning
Background color: white

span {
  width: 36px;
  height: 36px;
  position: relative;
  background: white;
}

The renderings are as follows

Step 2

Adding animation to span has 5 keys

First frame (initial state)

2D space: move right: 0 move down: 0
3D space: rotate 0 degrees around the x axis and 0 degrees around the y axis

 transform: translate(0, 0) rotateX(0) rotateY(0)

Second frame (relative to initial state)

Two dimensional space: move right: 100% move down: 0 (100% refers to the size relative to itself. If it is 100px wide, move 100px)
3D space: rotate 0 degrees around the x axis and 180 degrees around the y axis

transform: translate(100%, 0) rotateX(0) rotateY(180deg)

The effect diagram of the transition from the first frame to the second frame is as follows

Third frame (relative to initial state)

2D space: move right: 100% move down: 100%
3D space: rotate - 180 degrees around the x axis and 180 degrees around the y axis

  transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)

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

Frame 4 (relative to initial state)

2D space: move right: 0 move down: 100%
3D space: rotate - 180 degrees around the x axis and 360 degrees around the y axis

transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)

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

Frame 5 (relative to the initial state)

2D space: move right: 0 move down: 0
3D space: rotate 0 degrees around the x axis and 360 degrees around the y axis

transform: translate(0, 0) rotateX(0) rotateY(360deg)

The transition from the fourth frame to the fifth frame is shown below

To sum up, the animation code is:

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)
  }
}

The final effect drawing is as follows

epilogue

Learning reference:

https://codepen.io/bhadupranjal/pen/vYLZYqQ

The article is only used as a learning note to record a process from 0 to 1

I hope it will help you. If you have any mistakes, you are welcome to correct them

I'm Hai Hongyu ˊ ᵕ ˋ) If you think it's OK, please give it a compliment

Thank you for your support ❤️

Topics: Front-end html css

Programmer Think