HTML

<div class="spinner"></div>
Copy the code

CSS

.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; - Webkit-animation: SK-rotatePlane 1.2s infinite ease-in-out; Animation: SK-RotatePlane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: The perspective (120 px) rotateX (180.1 deg) rotateY (0 deg); -webkit-transform: Perspective (120px) rotateX(-180.1deg) rotateY(0deg)} 100% {transform: Perspective (120 px) rotateX (180 deg) rotateY (179.9 deg); - its - transform: perspective (120 px) rotateX (180 deg) rotateY (179.9 deg); }}Copy the code

Define a div element, set the sides to 40px with a white square on the background, and then set the loop flip animation to animate the loading effect

The Perspective attribute defines the distance of the 3D element from the view

HTML

<div class="sk-chase">
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
</div>
Copy the code

CSS

.sk-chase { width: 40px; height: 40px; position: relative; Animation: SK-Chase 2.5s infinite Linear both; } .sk-chase-dot { width: 100%; height: 100%; position: absolute; left: 0; top: 0; Animation: SK-Chase-Dot 2.0s infinite ease-in-out both; } .sk-chase-dot:before { content: ''; display: block; width: 25%; height: 25%; background-color: #fff; border-radius: 100%; Animation: SK-chase-dot-before 2.0s infinite ease-in-out both; }.sk-chase :nth-child(1) {animation-delay: -1.1s; }.sk-chase :nth-child(2) {animation-delay: -1.0s; }.sk-chase :nth-child(3) {animation-delay: -0.9s; }.sk-chase :nth-child(4) {animation-delay: -0.8s; }.sk-chase :nth-child(5) {animation-delay: -0.7s; }.sk-chase :nth-child(6) {animation-delay: -0.6s; }.sk-chase :nth-child(1):before {animation-delay: -1.1s; }.sk-chase :nth-child(2):before {animation-delay: -1.0s; }.sk-chase :nth-child(3):before {animation-delay: -0.9s; }.sk-chase :nth-child(4):before {animation-delay: -0.8s; }.sk-chase :nth-child(5):before {animation-delay: -0.7s; }.sk-chase :nth-child(6):before {animation-delay: -0.5s; } @keyframes sk-chase { 100% { transform: rotate(360deg); } } @keyframes sk-chase-dot { 80%, 100% { transform: rotate(360deg); }} @keyframes sk-chase-dot-before {50% {transform: scale(0.4); } 100%, 0% {transform: scale(1.0); }}Copy the code

Define a parent element div with six solid white dots, add a rotation animation, and set different delay times to achieve the effect of appearing in sequence

HTML

<div class="spinner">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div>
Copy the code

CSS

.spinner { width: 40px; height: 40px; position: relative; margin: 100px auto; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #333; Opacity: 0.6; position: absolute; top: 0; left: 0; -Webkit-Animation: sk-bounce 2.0s infinite ease-in-out; Animation: SK-bounce 2.0s infinite ease-in-out; }. Double-bounce2 {-webkit-animation-delay: -1.0s; Animation - delay: 1.0 s; } @-webkit-keyframes sk-bounce {0%, 100% {-webkit-transform: scale(0.0)} 50% {-webkit-transform: scale(0.0)} Scale (1.0)}} @keyframes sk-bounce {0%, 100% {transform: scale(0.0); - its - transform: scale (0.0); } 50% {transform: scale(1.0); - its - transform: scale (1.0); }}Copy the code

The two subelements of the DIV make a translucent circle, set the absolute positioning to overlap, and then set the same animation to zoom in and out alternately with different delay times.

HTML

<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>
Copy the code

CSS

.spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; - Webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; Animation: sk-stretchdelay 1.2s infinite ease-in-out; }.spinner. Rect2 {-webkit-animation-delay: -1.1s; Animation - delay: 1.1 s; }.spinner. Rect3 {-webkit-animation-delay: -1.0s; Animation - delay: 1.0 s; }.spinner. Rect4 {-webkit-animation-delay: -0.9s; Animation - delay: 0.9 s; }.spinner. Rect5 {-webkit-animation-delay: -0.8s; Animation - delay: 0.8 s; } @-webkit-keyframes sk-stretchdelay {0%, 40%, 100% {-webkit-transform: scaleY(0.4)} 20% {-webkit-transform: scaleY(0.4)} ScaleY (1.0)}} @keyframes sk-stretchdelay {0%, 40%, 100% {transform: scaleY(0.4); - its - transform: scaleY (0.4); } 20% {transform: scaleY(1.0); - its - transform: scaleY (1.0); }}Copy the code

A rectangle element with five divs under the class name spinner, set the scale of the Y axis, and use different delay times to achieve the effect of changing the order.

HTML

<div class="spinner">
  <div class="cube1"></div>
  <div class="cube2"></div>
</div>
Copy the code

CSS

.cube1, .cube2 { background-color: #333; width: 15px; height: 15px; position: absolute; top: 0; left: 0; -Webkit-animation: sk-cubemove 1.8s infinite ease-in-out; Animation: SK-cubemove 1.8s infinite ease-in-out; }.cube2 {-webkit-animation-delay: -0.9s; Animation - delay: 0.9 s; } @-webkit-keyframes sk-cubemove { 25% { -webkit-transform: TranslateX (42px) rotate(-90deg) scale(0.5)} 50% {-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: TranslateX (0px) translateY(42px) rotate(-270deg) scale(0.5)} 100% {-webkit-transform: Rotate (-360deg)}} @keyframes sk-cubemove {25% {transform: translateX(42px) rotate(-90deg) scale(0.5); - its - transform: translateX (px) 42 rotate (90 deg) scale (0.5); } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% {transform: translateX(20px) translateY(20px) rotate(-20px); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); {transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); }}Copy the code

Parse: The two sub-elements implement the white square, add animation attributes, set the move distance and zoom on the X and Y axes respectively, separate them by different delay times, and rorate implement rotation around the center.

HTML

<div class="spinner"></div>
Copy the code

CSS

.spinner { width: 40px; height: 40px; margin: 100px auto; background-color: #333; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; Animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes sk-scaleout {0% {-webkit-transform: scale(0)} 100% {-webkit-transform: scale(1.0); opacity: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% {-webkit-transform: scale(1.0); The transform: scale (1.0); opacity: 0; }}Copy the code

The unique div element is a white background dot, and the zoom and transparency are set to create the breathing light effect.

HTML

<div class="spinner">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>
Copy the code

CSS

.spinner { margin: 100px auto; width: 40px; height: 40px; position: relative; text-align: center; -webkit-animation: sk-rotate 2.0s infinite Linear; Animation: SK-rotate 2.0s Infinite Linear; } .dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #333; border-radius: 100%; -Webkit-Animation: sk-bounce 2.0s infinite ease-in-out; Animation: SK-bounce 2.0s infinite ease-in-out; } .dot2 { top: auto; bottom: 0; - its - animation - delay: 1.0 s; Animation - delay: 1.0 s; } @-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }} @keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: -webkit-transform: scale(1.0)}} @keyframes sk-bounce {0%, 100% {transform: scale(0.0); - its - transform: scale (0.0); } 50% {transform: scale(1.0); - its - transform: scale (1.0); }}Copy the code

Parse two solid circles doing cyclic scaling and rotation movements around the center, because of different delay times to get them at the same time to present the opposite performance.

HTML

<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>
Copy the code

CSS

.spinner { margin: 100px auto 0; width: 70px; text-align: center; } .spinner > div { width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; - Webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; Animation: sk-bouncedelay 1.4s infinite ease-in-out both; }.spinner. Bounce1 {-webkit-animation-delay: -0.32s; Animation - delay: 0.32 s; }.spinner. Bounce2 {-webkit-animation-delay: -0.16s; Animation - delay: 0.16 s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: Scale (1.0)}} @keyframes sk-bouncedelay {0%, 80%, 100% {-webkit-transform: scale(0); transform: scale(0); } 40% {-webkit-transform: scale(1.0); The transform: scale (1.0); }}Copy the code

3. Three solid color circles are arranged horizontally, and the linear animation scale is 0 to 1. By giving them different delay times, the effect is shown alternately.

HTML

<div class="sk-circle">
  <div class="sk-circle1 sk-child"></div>
  <div class="sk-circle2 sk-child"></div>
  <div class="sk-circle3 sk-child"></div>
  <div class="sk-circle4 sk-child"></div>
  <div class="sk-circle5 sk-child"></div>
  <div class="sk-circle6 sk-child"></div>
  <div class="sk-circle7 sk-child"></div>
  <div class="sk-circle8 sk-child"></div>
  <div class="sk-circle9 sk-child"></div>
  <div class="sk-circle10 sk-child"></div>
  <div class="sk-circle11 sk-child"></div>
  <div class="sk-circle12 sk-child"></div>
</div>
Copy the code

CSS

.sk-circle { margin: 100px auto; width: 40px; height: 40px; position: relative; } .sk-circle .sk-child { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-circle .sk-child:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #333; border-radius: 100%; - Webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; Animation: SK-circlebouncedelay 1.2s infinite ease-in-out both; } .sk-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .sk-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .sk-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sk-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .sk-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .sk-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sk-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .sk-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .sk-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .sk-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .sk-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); }.sk-circle2:before {-webkit-animation-delay: -1.1s; Animation - delay: 1.1 s; } .sk-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; }.sk-circle4:before {-webkit-animation-delay: -0.9s; Animation - delay: 0.9 s; }.sk-circle5:before {-webkit-animation-delay: -0.8s; Animation - delay: 0.8 s; }.sk-circle6:before {-webkit-animation-delay: -0.7s; Animation - delay: 0.7 s; }.sk-circle7:before {-webkit-animation-delay: -0.5s; Animation - delay: 0.6 s; }.sk-circle8:before {-webkit-animation-delay: -0.5s; Animation - delay: 0.5 s; }.sk-circle9:before {-webkit-animation-delay: -0.4s; Animation - delay: 0.4 s; }.sk-circle10:before {-webkit-animation-delay: -0.5s; Animation - delay: 0.3 s; }.sk-circle11:before {-webkit-animation-delay: -0.2s; Animation - delay: 0.2 s; }.sk-circle12:before {-webkit-animation-delay: -0.1s; Animation - delay: 0.1 s; } @-webkit-keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); }}Copy the code

The whole loading effect is made up of 12 centers, set different rotations to make them appear circular, and then set different delay times to make them zoom.

HTML

<div class="sk-cube-grid"> <div class="sk-cube sk-cube1"></div> <div class="sk-cube sk-cube2"></div> <div class="sk-cube  sk-cube3"></div> <div class="sk-cube sk-cube4"></div> <div class="sk-cube sk-cube5"></div> <div class="sk-cube sk-cube6"></div> <div class="sk-cube sk-cube7"></div> <div class="sk-cube sk-cube8"></div> <div class="sk-cube sk-cube9"></div> </div>Copy the code

CSS

.sk-cube-grid { width: 40px; height: 40px; margin: 100px auto; } .sk-cube-grid .sk-cube { width: 33%; height: 33%; background-color: #333; float: left; -Webkit-animation: sk-cubegridScaledelay 1.3s infinite ease-in-out; Animation: sk-cubegridScaledelay 1.3s infinite ease-in-out; animation: Sk-cubegridScaledelay 1.3s infinite ease-in-out; }.sk-cube1 {-webkit-animation-delay: 0.2s; Animation - delay: 0.2 s; }.sk-cube2 {-webkit-animation-delay: 0.3s; Animation - delay: 0.3 s; }.sk-cube3 {-webkit-animation-delay: 0.4s; Animation - delay: 0.4 s; }.sk-cube4 {-webkit-animation-delay: 0.1s; Animation - delay: 0.1 s; }.sk-cube5 {-webkit-animation-delay: 0.2s; Animation - delay: 0.2 s; }.sk-cube6 {-webkit-animation-delay: 0.3s; Animation - delay: 0.3 s; } .sk-cube-grid .sk-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; }.sk-cube8 {-webkit-animation-delay: 0.1s; Animation - delay: 0.1 s; }.sk-cube9 {-webkit-animation-delay: 0.2s; Animation - delay: 0.2 s; } @-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } @keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); }}Copy the code

The nine squares are arranged through the grid to form three horizontal and three vertical blocks, and set different latency times to make them zoom in a linear 3D motion.

HTML

<div class="sk-fading-circle">
  <div class="sk-circle1 sk-circle"></div>
  <div class="sk-circle2 sk-circle"></div>
  <div class="sk-circle3 sk-circle"></div>
  <div class="sk-circle4 sk-circle"></div>
  <div class="sk-circle5 sk-circle"></div>
  <div class="sk-circle6 sk-circle"></div>
  <div class="sk-circle7 sk-circle"></div>
  <div class="sk-circle8 sk-circle"></div>
  <div class="sk-circle9 sk-circle"></div>
  <div class="sk-circle10 sk-circle"></div>
  <div class="sk-circle11 sk-circle"></div>
  <div class="sk-circle12 sk-circle"></div>
</div>
Copy the code

CSS

.sk-fading-circle { margin: 100px auto; width: 40px; height: 40px; position: relative; } .sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #333; border-radius: 100%; - Webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; Animation: SK-circleFadeDelay 1.2s infinite ease-in-out both; } .sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); Before {-webkit-animation-delay: -1.0s;}.sk-fading- circle2:before {-webkit-animation-delay: -1.0s; Animation - delay: 1.1 s; } .sk-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; Before {-webkit-animation-delay: -0.9s;}.fading fading :before {-webkit-animation-delay: -0.9s; Animation - delay: 0.9 s; Before {-webkit-animation-delay: -0.8s;}.fading fading: fading; Animation - delay: 0.8 s; Before {-webkit-animation-delay: -0.0s;}.sk-fading- circle6:before {-webkit-animation-delay: -0.0s; Animation - delay: 0.7 s; Before {-webkit-animation-delay: -0.0s;}.sk-fading- circle7:before {-webkit-animation-delay: -0.0s; Animation - delay: 0.6 s; Before {-webkit-animation-delay: -0.0s;}.datapool {-datapool}.datapool {-datapool}.datapool {-datapool; Animation - delay: 0.5 s; Before {-webkit-animation-delay: -0.0s;}.datapool {-datapool; Animation - delay: 0.4 s; Before {-webkit-animation-delay: -0.3s; Animation - delay: 0.3 s; Before {-webkit-animation-delay: -0.2s;}.datapool: datapool {-datapool: datapool; Animation - delay: 0.2 s; Before {-webkit-animation-delay: -0.1s;}.datapfading :before {-webkit-animation: -0.1s; Animation - delay: 0.1 s; } @-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; }}Copy the code

The loading animation consists of 12 solid colored dots spread out 360 degrees in turn, which are rotated and changed in turn.

HTML

<div class="sk-folding-cube">
  <div class="sk-cube1 sk-cube"></div>
  <div class="sk-cube2 sk-cube"></div>
  <div class="sk-cube4 sk-cube"></div>
  <div class="sk-cube3 sk-cube"></div>
</div>
Copy the code

CSS

.sk-folding-cube { margin: 20px auto; width: 40px; height: 40px; position: relative; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; - its - transform: scale (1.1); - ms - transform: scale (1.1); The transform: scale (1.1); } .sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; - Webkit-Animation: SK-FoldCubeAngle 2.4s infinite Linear both; Animation: SK-FoldCubeAngle 2.4s infinite Linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; }.sk-folding-cube. Sk-cube2 {-webkit-transform: scale(1.1) rotateZ(90deg); The transform: scale (1.1) rotateZ (90 deg); }.sk-folding-cube. Sk-cube3 {-webkit-transform: scale(1.1) rotateZ(180deg); The transform: scale (1.1) rotateZ (180 deg); }.sk-folding-cube. Sk-cube4 {-webkit-transform: scale(1.1) rotateZ(270deg); The transform: scale (1.1) rotateZ (270 deg); }.sk-folding-cube. Sk-cube2 :before {-webkit-animation-delay: 0.3s; Animation - delay: 0.3 s; }.sk-folding-cube. Sk-cube3 :before {-webkit-animation-delay: 0.6s; Animation - delay: 0.6 s; }.sk-folding-cube. Sk-cube4 :before {-webkit-animation-delay: 0.9s; Animation - delay: 0.9 s; } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }}Copy the code

The four equilateral squares form a square and rotate the whole square by 45 degrees. Then each square is animated along the X-axis with a different delay time. Perspective is set to have a 3D effect.

Conclusion In all of these cases, the animation effect is achieved by using different delay times for elements or children, including movement, rotation, and scaling on the X, Y, and Z axes. With these references and creativity, you can make more types of loading.

Welcome to pay attention to the public “space programming”, take you to understand the core programming knowledge