CSS3 Animations and Transitions

Transform: Use Transform-style to declare the type of conversion before using 2D or 3D conversion, preserve-3d or preserve-2d

Property

Translate ():

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

Rotate ():

The element rotates the given angle clockwise by the rotate () method. Negative values are allowed, and the elements rotate counterclockwise.

At 3D, there is Rotatex (): Flip to screen exception, Rotatey (): Flip around the screen, Rotatez (): Same as 2d under rotate (), rotate clockwise or counterclockwise on the screen.

Scale ():

With the scale () method, the dimension of the element increases or decreases, depending on the given width (X-axis) and height (Y-axis) parameters

Skew ():

By the skew () method, the element flips the given angle, based on the given horizontal line (X-axis) and vertical (Y-axis) parameters

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

Two elements must be specified:

• Specify which CSS property you want to add the effect to
• Duration of the specified effect

Example: Transition:width 2s;

Style: Ease gentle change

Linear uniform variation

Ease-in Slow start

Ease-out Slow End

Ease-in-out slow start, slow end

Animation: First you need to first define an animation in the format of the @keyframe animation name, and then use animation to invoke the animation

@keyframe myfirst{

from{}//Start effect

to{}//End Effect

}

or @keyframe myfirst{

0%{}//can also represent the process of animation in percent

30%{}

70%{}

100%{}

}

Animation

Animation-name:myfirst; Animation name
animation-duration:5s;//Animation duration
animation-timing-function:linear;//animation change effect, with transition
animation-delay:2s;//Animation delay Playback time
Animation-iteration-count:infinite;//infinite defined as a wireless loop
animation-direction:alternate;//Specifies whether the animation will play backwards in the next cycle. The default is "normal".

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

CSS3 animations and transitions