CSS3 animation effects

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.