CSS3 animation and transition_html/css_WEB-ITnose

transform: Before using 2D or 3D conversion, you need to use transform-style to declare the type of conversion, preserve-3d or preserve-2d

Attributes

　translate( ):

With the translate() method, the element is moved from its current position according to the given left (x coordinate) and top (y coordinate) position parameters.

rotate():

Through the rotate() method, the element is rotated clockwise by a given angle. Negative values ​​are allowed, and the element will be rotated counterclockwise.

Under 3D, there is rotateX(): rotate to the screen exception; rotateY(): rotate left and right on the screen, rotateZ(): same as rotate() in 2D , rotate clockwise or counterclockwise on the screen.

　scale():

　Through the scale() method, the size of the element will increase or decrease, according to the given width (X-axis) and height (Y-axis) parameters

skew():

Through the skew() method, the element is flipped by the given angle, according to the given horizontal line (X axis) and vertical line (Y axis) parameters

Transition: Add effects to elements when they transform from one style to another without using Flash animations or JavaScript

Two items must be specified:

Specify which CSS property you want to add the effect to

Specify the duration of the effect

Example: transition:width 2s;

Style: ease smooth change

Linear uniform change

ease-in starts slowly

ease-out ends slowly

ease-in-out starts slowly and ends slowly

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

@keyframe myfirst{

　from{}//Start the effect

　to{}//End effect

}

or @keyframe myfirst{

　0%{}　　　///You can also use percentages to represent animations Process

30%{}

70%{}

100%{}

}

animation:

animation-name: myfirst; //Animation name
animation-duration: 5s; //Animation duration
animation-timing-function: linear; //Animation change effect, same as transition
animation-delay : 2s; //Animation delay playback time
animation-iteration-count: infinite; //infinite is defined as an infinite loop
animation-direction: alternate; // Specifies whether the animation is played in reverse in the next cycle. The default is "normal".

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