CSS3 learning page loading animation (1)

This article will share with you four CSS3 page loading animations. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Two days ago, I saw some good loading animation effects from a website. They were written in pure CSS3. They felt good, so I tried to write them myself according to the effects.

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 a positive value, the animation will be delayed from the initial state;

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

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

1. The first effect

There are 16 small squares in total. Position the position and change the transparency of the square through key frames.

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

Set the animation-delay value for each square. My overall animation time here is 2s, dividing 16 squares equally is 0.125s, so the animation-delay value I set starts from -1.875s and increases with a numerical 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 ball {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;
      }
    }

4. The 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 I’ll write for now, I’ll add more later. (To be continued)

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit

CSS Basics Video Tutorial

, CSS3 Video Tutorial, bootstrap Tutorial!

The above is the detailed content of CSS3 learning page loading animation (1). For more information, please follow other related articles on the PHP Chinese website!