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

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

CSS3-loading loading Animation

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

I posted four articles and published 22 results. I will share six more results today, with a total of 28 results.

23. effect 23

 

The two squares are initially located on the top left (top: 0; left: 0 ;);

A complete movement is divided into four stages: the first stage, the top left to the top right, rotating 90 °, width and height reduced; the second stage, the top right to the bottom right, rotating 180 °, width and height reply; in the third stage, move the lower right to the lower left, rotate 270 °, and the width and height are reduced. In the fourth stage, move the lower left to the upper left, rotate 360 °, and return the width and height.

The animation delay time is a negative half of the animation time.

{animation: party_ball 2s ease infinite;}
@keyframes party_ball {      25% {        -webkit-transform: scale(.5) rotateZ(90deg);        transform: scale(.5) rotateZ(90deg);        top: 0;        left: 100%;      }      50% {        -webkit-transform: scale(1) rotateZ(180deg);        transform: scale(1) rotateZ(180deg);        top: 100%;        left: 100%;      }      75% {        -webkit-transform: scale(.5) rotateZ(270deg);        transform: scale(.5) rotateZ(270deg);        top: 100%;        left: 0;      }      100% {        -webkit-transform: scale(1) rotateZ(360deg);        transform: scale(1) rotateZ(360deg);        top: 0;        left: 0;      }    }

24. effect 24

 

Similar to the flame beating effect, the three square divs are positioned to the center horizontally, vertical bottom, and the initial width and height are set to 0.

When moving up, you can change the width and height of the square.

{animation: fire_ball 1.5s linear infinite;}@keyframes fire_ball {      50% {        height: 30px;        width: 30px;        top: 50%;      }      100% {        height: 0;        width: 0;        top: 0;      }    }

25. effect 25

 

It looks like a child game-douman

Create a douman on the left: Set the width and height of the two divs to 0, set only the border, and set the color attribute of the right border to transparent. The code and effect are as follows:

.pac_head {      border: 25px solid #fff;      border-right-color: transparent;      border-radius: 50%;    }

The douman's mouth has been made. The remaining two divs rotate in the forward Z axis and in the reverse Z axis.

The three balls on the right are set to the middle of the right side, and the animation time of the ball and the animation time of the douman are adjusted as appropriate.

@keyframes pac_ball {      100% {        right: 55%;      }    }

26. effect 26

 

Broken paper

The difficulty of this effect lies in how the effects of fall deformation are implemented. It is actually very simple. First of all, you must understand that a square, as long as it is a multiple of 90 degrees around the Z axis, looks exactly the same as the source image, so this effect is very simple, you don't have to consider adding a deformation effect to each corner.

Deformation effect: you only need to change the border-radius value to produce this deformation.

@ Keyframes beat_ball {25% {transform: translateY (25%) rotate (22.5deg); // whereabouts border-bottom-right-radius: 10% ;} 50% {border-bottom-right-radius: 100%; transform: translateY (50%) scale (1, 0.8) rotate (45deg) // scale, to make the deformation look elastic} 75% {transform: translateY (25%) rotate (67.5deg) // rise} 100% {transform: translateY (0) rotate (90deg) // Rotate 90 ° to end a cycle, which is exactly the same as the initial state, so you can directly re-execute the animation }}

The effect of the shadow is better. Make a flat oval shape and add the shadow effect to the box-shadow. It is OK to change the size in due time.

@keyframes beat_shadow {      50%{        transform: scale(1.25,0.8);      }    }

27. effect 27

 

A div, a pseudo class, is made.

Div is responsible for rotation, and the pseudo class is responsible for changing the height and performing their respective duties.

@ Keyframes locker_ball {// div rotate 25% {transform: rotateZ (180deg);} 50% {transform: rotateZ (180deg);} 75% {transform: rotateZ (360deg );} 100% {transform: rotateZ (360deg) ;}@ keyframes locker_ballh {// pseudo class height changed by 25% {height: 40px;} 50% {height: 0;} 75% {height: 0;} 100% {height: 40px ;}}

28. effect 28

 

Clock effect (I don't seem to be positioned in the center)

The clock effect can be done with only one key frame animation, that is, the rotation of 360 °, as long as the animation time of the two pointers is changed.

@keyframes clock {      100%{        transform: rotateZ(360deg);      }    }

 

 

In this series of animations, some pause effects are achieved through key frame control from a certain percentage to a certain percentage, while others are achieved through motion curve seek.

 

End the sprinkling ~ Over the weekend ~