What are the loading animations?

零下一度
Release: 2017-07-24 10:20:56
Original
1866 people have browsed it

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;
      }
    }
Copy after login

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;
      }
    }
Copy after login

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;
      }
    }
Copy after login

##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;
      }
    }
Copy after login
##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);
      }
    }
Copy after login

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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!