What are the loading animations?

Before starting, let’s review a little knowledge: CSS3’s new keyframe animation can be used to implement many animations. We can use animation-delay to control the delayed execution of animations to achieve rich effects.

When the value of animation-delay is positive, the animation will be delayed from the initial state;

When the value of animation-delay is negative, the animation will be advanced Start execution from the state corresponding to this value (the absolute value of a negative number).

(The effect picture may not be clear, please understand)

1. The first effect

There are 16 small squares in total, position them, and change the transparency of the squares through key frames

{animation: ball 2s 0s ease infinite;}
@keyframes ball {
      0%{
        opacity: 1;
      }
      50%{
        opacity: 1;
      }
      51%{
        opacity: 0;
      }
    }

For each square Set the animation-delay value. Here, my overall animation time is 2s, and the average time of 16 squares is 0.125s. So the animation-delay value I set starts from -1.875s and increases with a difference of 0.125 until it reaches 0. .

2. The second effect

The position of the big ball in the middle remains unchanged. The small balls are contained in three squares respectively. Set the position of the small balls {top:0;left:0;}, and set the square rotateZ to rotate to form this intersection.

Set the animation process through key frame animation (the writing of key frame animation below is not the best method), and set the animation-delay value for each ball, so that the three balls can move at different times. moment passes from the front.

{animation: turn_atom 1.5s 0s ease infinite;}
@keyframes turn_atom {
      0%{
        height:25px;
        width: 25px;
        top: 0;
        left: 0;
      }
      50%{
        height: 20px;
        width: 20px;
        top: 60px;
        left: 60px;
      }
      51%{
        height: 15px;
        width: 15px;
        top: 60px;
        left: 60px;
      }
      100%{
        height: 20px;
        width: 20px;
        top: 0;
        left: 0;
      }
    }

In addition, you also need to set the z-index value for the parent container of the three small balls through key frame animation to achieve the visual effect of the small balls rotating around the big ball.

{animation: turn_atomZ 1.5s 0s ease infinite;}
@keyframes turn_atomZ {
      0%{
        z-index: 6;
      }
      50%{
        z-index: 6;
      }
      51%{
        z-index: 4;
      }
    }

##3. The third effect

##This effect is relatively simple, just change the size and transparency of the ball (the transparency and the width and height of the ball are initially defined).

{animation: light 1.5s 0s ease infinite;}
@keyframes light {
      50%{
        opacity: 0.4;
        height: 15px;
        width: 15px;
      }
    }

##Fourth effect

##Initially, the four balls are positioned at the same position, and the left value of the ball and the size of the ball can be changed through key frames.

{animation: r_ball 2s 0s ease infinite,r_ballZ 2s 0s ease infinite;}
@keyframes r_ball {
      50%{
        left: 100%;
      }
    }
    @keyframes r_ballZ {
      25%{
        transform: scale(0.5);
      }
      50%{
        transform: scale(1);
      }
    }

That’s all for now, and there will be more to come later.

(To be continued)

The above is the detailed content of What are the loading animations?. For more information, please follow other related articles on the PHP Chinese website!