CSS3-loading animation (3), css3-loading Animation

CSS3-loading animation (3), css3-loading Animation

Sharing continues, and images are not really visible

Online demo: http://liyunpei.xyz/loading.html

11. effect 11

 

The four balls are respectively contained in four square Divs. The ball is positioned relative to the square (top: 0; left: 0), and the square div is set to rotate so that the ball is located at the four corners, then, the Key Frame Animation is used to control the ball moving back and forth between the current position and the position close to the center point.

{animation: flor_move 1s 0s ease infinite;}@keyframes flor_move {      50%{        top: 25px;        left: 25px;      }    }

There is only one rotation effect left, and this is handed over to the parent element of the square div.

{animation: flor_rote 2s 0s ease infinite;}@keyframes flor_rote {      25%{        transform: rotateZ(90deg);      }      50%{        transform: rotateZ(180deg);      }      75%{        transform: rotateZ(270deg);      }      100%{        transform: rotateZ(360deg);      }    }

12. effect 12

 

It is not difficult to achieve this effect. You can set the positions of the nine balls and change the transparency of the ball. (different animation time should be set for each ball)

@keyframes mar_ligt {      50%{        opacity: 0.4;      }    }

13. effect 13

 

There are still nine small balls, but the size of the ball is changed here. To prevent typographical disorder caused by the size change, every small ball is included in a div with a fixed width and height, center the ball in the vertical and horizontal directions of the div. In this way, you can safely change the size of the ball (each ball still sets a different animation time)

@keyframes mar_ligts {      50%{        transform: scale(.5);        opacity: 0.4;      }    }

14. effect 14

 

Ball hitting effect: Four balls are arranged in the center in the vertical and horizontal directions. The two balls in the middle are not moving, and the balls on both sides move back and forth to the two sides respectively (pay attention to the time difference of movement ).

{Animation: poolball_l 1 s. 5 s linear infinite;} // The left ball {animation: poolball_r 1 s 0 s linear infinite;} // The right ball @ keyframes poolball_l {25% {transform: translateX (-100%);} 50% {transform: translateX (0) ;}@ keyframes poolball_r {25% {transform: translateX (100%);} 50% {transform: translateX (0 );}}

15. effect 15

 

This is a very common effect. Similarly, to prevent page layout disorder due to the change of the Ball Size, add a fixed width and height div on the outside of the ball.

Set animation latency for each ball

{animation: size_change 1.2s linear infinite;}@keyframes size_change {      20%{        width: 0;        height: 0;      }      40%{        width: 0;        height: 0;      }      50%{        width: 20px;        height: 20px;      }    }

16. effect 16

 

The five balls only need to be horizontally centered, and the distance between the balls can be opened through the margin. The translateY, width, height, and transparency of the ball can be changed through the key frame animation.

The initial width and height of the ball are 15px, and the transparency is. 6.

{animation: flip_ballP 1.2s ease infinite,flip_ballS 1.2s ease infinite;}@keyframes flip_ballP {      50%{        transform: translateY(60px);      }    }    @keyframes flip_ballS {      50%{        height: 15px;        width: 15px;        opacity: 0.6;      }      75%{        height: 20px;        width: 20px;        opacity: 1;      }    }

 

 

Not yet resumed. Continue tomorrow ~