CSS3-loading animation (1), CSS3-loading animation (

CSS3-loading animation (1), CSS3-loading animation (

Two days ago, I saw some good loading animation effects from a website, which I wrote with pure CSS3. I felt good, so I tried to write it by myself.

Before starting, let's first review a small knowledge: the Key Frame animation added by CSS3 can be used to implement a lot of animations. We can use animation-delay to control the animation delay execution, to achieve a variety of results.

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 executed from the status corresponding to this value (the absolute value of the negative number) in advance.

 

Online demo: http://liyunpei.xyz/loading.html (continuous update)

(The film may not be clear, please forgive me)

I. First Effect

A total of 16 small squares are located, and the transparency of the square is changed through the key frame.

{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. Here, the overall animation time is 2 s, and the 16 squares are evenly divided into 0.125 s, so the value of animation-delay I set is increased from-1.875s to 0.125 in the Number Difference until 0.

Ii. Second Effect

The position of a large ball in the middle remains unchanged. The three balls next to the ball are contained in three squares respectively. Position the ball {top: 0; left: 0 ;}, this cross can be formed by setting the square rotateZ rotation.

Set the animation process through the Key Frame animation (the writing of the Key Frame animation below is not the best method), and set the animation-delay value for each ball, three small balls can pass from the front at different times.

{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 balls through the Key Frame Animation to achieve the visual effect when the ball is spinning around the 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. Third Effect

 

This effect is relatively simple. You only need to change the size and transparency of the ball (Transparency and width and height of the ball have been defined at the beginning ).

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

Iv. Fourth Effect

Initially, the four balls are located in the same position, and the left value and size of the ball can be changed through the key frame.

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

 

Write so much for the time being, which will be added later.

(To be continued)