Make a simple animation with CSS

One. 2D Conversion
Property: Translate () x, y position move
Rotate () Clockwise rotation angle (unit deg, negative number counterclockwise)
Scale () x, y element size increase or decrease
Skew () x, y direction pull (horizontal pull, vertical pull)

1.translate
With the translate method, the element is moved from its current position based on the given left (x coordinate) and top (Y coordinate position).
Gca
Transform:translate (50px,100px);
The value translate (50px,100px) moves the element from the left to the right 50px, moving from the upper end to 100px

2.rotate ()
by rotate (), the element rotates the given angle clockwise, allowing negative values, and the element rotates the given angle counterclockwise
Gca
Transform:rotate (30DEG)
Transform:rotate ( -45DEG)

3.scale ()
With the scale method, the element size increases or decreases depending on the given width (x-axis) and height (y-axis) parameters
Gca
Transform:scale (2,0.6)
The x-axis expands to twice times and the y-axis expands to 0.6 times times


4.skew () method
Pull the element according to the x-axis or y-axis through the skew () method
Columns such as: Transform:skew (10DEG,20DEG)

Two. 3D Conversion

Rotatex () flips around the x-axis
Rotatey () flips forward and backward around the y-axis

Column: Transform:rotatex (120deg)



CSS3 Excessive
Excessive is the effect of an element gradually changing from one style to another (animated)

Property: Transition
Gca
div{
width:100px;
height:100px;
transition:width 2s linear 5s;
}
div:hover{
width:300px;
}
(Hover over Div, div to width 300, animation for 2 seconds, animation speed average, 5 seconds start animation)

CSS3 Animation (animation (@keyframes))
Steps:
1. Specify the name of the animation

2. Use percentages to specify the process in which changes occur (keywords "from" and "to", equivalent to 0% (start) and 100% (end))

3. Bundle to a Selector

4. Specify the duration of the animation

Set start and end directly
Column:
@keyframes Myfirst
{
from {background:red;}
to {Background:yellow;}
}


2.animation
Animation Properties: Properties:
animation-name:myfirst;//Animation Name
animation-duration:5s;//Animation Execution Time
animation-timing-function:linear;//Animation Execution Effect
animation-delay:2s;//Animation delay Time

Shorthand:
Animation:myfirst 5s linear 2s infinite alternate;

Make a simple animation with CSS