css3-loading Animation (v)

Css3-loading Loading animations

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

Before sending four, 22 effects, today share six effects, a total of 28 effects.

23. Effect 23

Two squares, initially positioned to upper left (top:0;left:0;);

A complete movement is divided into four stages: the first stage, the top left to move to the upper right, rotation 90 °, width and height reduction, the second stage, right up to the lower right, rotation 180 °, wide high reply; the third stage, lower right move to lower left, rotation 270 °, width and height reduction; fourth stage, move left , wide high reply.

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

{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 beat effect of the flame, the three square div is positioned horizontally centered, the vertical bottom, and the initial width height are set to 0.

As you move up, change the width of the square.

{animation: fire_ball 1.5s linear infinite;}  {      50% {        height: 30px;         Width: 30px;         top: 50%;      } {height: 0;                        Width: 0;         top: 0;      }     }

25. Effect 25

It's like playing games as a kid--eating beans.

Left Pac Man's production: two div width height of 0, only set the border, the right side of the box to set the color property to transparent, the code and the effect is as follows:

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

Bean-eater's mouth has been made, the rest, two div a positive z-axis rotation, a reverse z-axis rotation, then made out of the action of eating.

The right three balls are set to the right middle, to the mouth of the Bean-eater movement, the small ball of animation time and the time to adjust the animation of the bean-eating people can be appropriate.

{      100% {        right: 55%;      }     }

26. Effect 26

The pieces of paper that will bounce

The difficulty of this effect lies in how the effect of falling deformation is done. It's actually very simple. First of all to understand that a square, as long as the z-axis rotation of a multiple of 90, then it looks exactly the same as the original, then the effect is very simple, no longer consider to add a deformation of each corner effect.

Deformation effect: This distortion can be created by changing the value of the Border-radius.

@keyframes Beat_ball{25% {Transform:Translatey (25%) rotate (22.5deg);//WhereaboutsBorder-bottom-right-radius:10%; }50%{Border-bottom-right-radius:100%;Transform:Translatey (50%) scale (1, 0.8) rotate (45deg)//scale, to make the deformation appear resilient}75%{Transform:Translatey (25%) rotate (67.5deg)//Ascent}100%{Transform:translatey (0) rotate (90deg)//rotate 90° to end a cycle, exactly the same as the initial state, then repeat the animation directly}    }

The effect of the shadow is better said, do a flat ellipse out, Box-shadow plus shadow effect, timely is to change the size of OK.

{      50%{        transform: Scale (1.25,0.8);      }     }

27. Effect 27

A Div, a pseudo-class is made.

Div is responsible for the rotation, the pseudo-class is responsible for changing the height, the respective duties are done.

@keyframes Locker_ball{//div Rotary 25%{Transform:Rotatez (180deg); }50%{Transform:Rotatez (180deg); }75%{Transform:Rotatez (360deg); }100%{Transform:Rotatez (360deg); }} @keyframes Locker_ballh{//pseudo-class height change 25%{ height:40px; }50%{Height:0; }75%{Height:0; }100%{Height:40px; }    }

28. Effect 28

The effect of the clock (my position does not seem to be in the middle)

The effect of the clock is only used in a keyframe animation is done, that is, rotate 360 °, as long as the change of two pointer animation time can be.

{      100%{        transform: Rotatez (360deg);      }     }

In this series of animations, some pauses are achieved by controlling the key frame from a percentage to a percentage, while others are ease by the motion curve.

The end of the flower ~ the weekend ~

css3-loading Animation (v)