CSS 3 animation and transition, CSS 3 animation transition

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 ".