CSS 3 animation and transition, CSS 3 animation transition

Source: Internet
Author: User

CSS 3 animation and transition, CSS 3 animation transition

Transform: specifies the type, preserve-3d, or preserve-2d of the conversion before using a 2D or 3D conversion.

Attribute

Translate ():

Using the translate () method, an element moves from its current position based on the given left (x coordinate) and top (y coordinate) position parameters.

Rotate ():

By using the rotate () method, the element rotates the given angle clockwise. Negative values are allowed. The element is rotated counter-clockwise.

In 3D, there are rotateX (): Turning to the screen without exception; rotateY (): turning around the screen, rotateZ (): Same as rotate () in 2d, rotate clockwise or counterclockwise on the screen.

Scale ():

The scale () method increases or decreases the element size based on the given width (X axis) and height (Y axis) parameters.

Skew ():

The skew () method is used to flip an element to a given angle based on the given horizontal line (X axis) and vertical line (Y axis) parameters.

 

Transition: Add effects to an element when an element is transformed from one style to another without Flash animation or JavaScript

Two items must be specified:

  • Specifies the CSS attribute to which you want to add the effect
  • Specify the duration of the effect

Example: transition: width 2 s;

Style: smooth changes

Linear variation

Slow-in starts slowly

Slow-out

Slow-in-out starts slowly and ends slowly

 

Animation: First, you must define an animation in the format of @ keyframe animation name, and then use animation to call the animation.

@ Keyframe myfirst {

From {} // start Effect

To {} // End Effect

}

Or @ keyframe myfirst {

0% {} // The animation process can also be expressed as a percentage.

30% {}

70% {}

100% {}

}

Animation:

Animation-name: myfirst; // animation name
Animation-duration: 5S; // animation duration
Animation-timing-function: linear; // animation effect, same as transition
Animation-delay: 2 s; // animation playback delay Time
Animation-iteration-count: infinite; // infinite is defined as a wireless loop.
Animation-direction: alternate; // specifies whether the animation is played reversely in the next cycle. The default value is "normal ".

Animation-play-state: running // specifies whether the animation is running or paused. The default value is "running ".

Related Article

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.