CSS3 implementation of the proposed small animation

This article mainly introduces about the CSS3 implementation of the proposed small animation, has a certain reference value, now share to everyone, the need for friends can refer to

See this article in the public number yesterday, instantly feel that CSS is too powerful, as long as you want to do, everything is possible!

Let's put one first.

Then step by step analysis:

The first is the appearance of the groom's animation

. w-m Img{margin-right:0;float:right;margin-top:60px;animation:towoman 0.5s ease. 5s both;} @keyframes towoman{0%{opacity:0;transform:translate ( -200px);} 100%{opacity:1;transform:translate (0);}}

The knowledge points used in the inside:

• Animation: is a shorthand property for setting six animation properties

• ANIMATION-NAME Specifies the keyframe name to bind to the selector

• Animation-duration specifies the time, in seconds or milliseconds, that the animation will take to complete

• Animation-timing-function speed curve of the specified animation

• ANIMATION-DELAY specifies the delay before the animation starts

• ANIMATION-ITERATION-COUNT specifies the number of times an animation should play

• Animation-direction Specifies whether the animation should be rotated in reverse

• keyframes: lets developers control the intermediate links of CSS animations by specifying the keyframe style (or dwell point) that must be present at a specific point in the animation. This allows the developer to control more details in the animation than to let the browser handle it all automatically

• Transform applies a 2D or 3D conversion to an element. This property allows us to rotate, scale, move, or skew elements

And then the CSS for that flower.

. w-f{    Position:absolute;    z-index:20;    left:50%;    Margin-left: -30px;    margin-top:75px;}. w-f img{width:60px;animation:show 0.4s ease 1s both;} @keyframes Show{0%{opacity:0;transform:scale (0.1,0.1);} 100%{opacity:1;transform:scale (n);}}

CSS for the text part

. W-t-m{position:absolute;left:50%;z-index:10;line-height:80px;color: #ff720a; letter-spacing:5px;opacity:0; animation:titlebloom 1s linear 1s both;font-size:26px;    Margin-left: -125px;} @keyframes titlebloom{0% {    transform:translate ( -50px);} 100% {opacity:1;    Transform:translate (0);}}

The effect of the text side fireworks

. w-t img{opacity:0;    animation:bloom 2s ease 1.2s infinite;}. w-t img.boom2{float:right;animation:bloom 2s ease 1.5s infinite;}. w-t img.boom3{position:absolute;margin-top:40px;animation:bloom 2s ease 1.4s infinite;} @keyframes bloom{0% {    transform:scale (0,0);} 100% {opacity:1;    Transform:scale (n);}}

The effect of the last bunch of flowers

. w-fls{width:820px;margin:0 Auto;}. W-fls img{height:120px;z-index:400;animation:showflows 0.4s ease 2.3s both;} @keyframes showflows{0%{opacity:0;transform:translate (0,200px);} 100%{opacity:1;transform:translate (0);}}. W-2{margin-top: -130px;padding-left:100px;}. W-2 img{animation:showflows 0.4s ease 2.7s both;}

write here, think front-end development turns out to be such an interesting thing ha ~