CSS3 animation effects

Use the animated properties of CSS3 to realize the mobile effect of JS

Write the class name and CSS property first.

Use the transition global property to achieve the time that the animation moves from left to right.

Use the Transition-property property to specify when the width of the class name moves the effect.

Use Transition-delay to implement its delay time.

Use the transition-timing-function to select its motion curve.

And, of course, the simplest combination.

Use the Transition global attribute to implement the above notation

. Seser{width:200px;Height:200px;background:#F00;/*Animation left-to-right motion element width three seconds*/transition:width 3s;/*specifies that the property to be monitored is the width of the element*/Transition-property:width 2s;/*delay time is 0.1 seconds*/Transition-delay:0.1s;/*the curve of motion is: constant speed*/transition-timing-function:Linear;/*General Wording*/transition:All 3s 0.1 linear;}

The following is a picture of the movement effect.

The Global Transition Global property is used to implement the

. Serad{Margin-left:400px;Margin-top:100px;width:500px;Height:400px;position:Absolute;}. Serad img{width:300px;Height:300px;Border:2px solid #F00;position:Absolute; Left:0;Top:0;transition:Left 2s;}. Serad Img:hover{ Left:-20px;}

CSS3 animation effects