Comb CSS3 Animation Part of the knowledge again

1, Transform: for 2D or 3D conversion elements

Transform-origin: The location point of the element

CSS3 conversion (2D conversion and 3D conversion): Elements can be moved, scaled, rotated, stretched, or stretched.

Translate (), rotate (), scale (), skew (), Matirx ()

Position change, rotation, magnification, twist, matrix

Example:

Transform-origin:center 40px; The origin of the change;

Transition:transform. 7s ease;

Img:first-child{transform:roate (5DEG)};

Img:last-child{transform:roate ( -5deg);}

: Hover img:first-child{transform:roate (25DEG)};

: Hover img:last-child{transform:roate ( -25deg);}

2. Transition transition Add an effect to move from one style to another

Floating into the floating effect: Before the change img{transform:translate ( -100px,-100px);

opacity:0;

transition:opacity 1s ease-in-out. 5s;}

After the change: hover img{transform:translate (0px,0px);

Opacity:1;

transition:opacity 1s ease-in-out. 1s;

}

3, animation can set the time speed to start the play times need @keyframes to define can

Example: animation:fadeout 1s infinite ease-in-out;

@keyframes fadeout{

From{transform:scale (0,0);}

To{transform:scale (1,0); opacity:0}

}

Or

@keyframes fadeout{

0%{transform:scale (0,0);}

25%{transform:scale (1,0); opacity:0}

100%{transform:scale (0,0);}

}

Comb CSS3 Animation Part of the knowledge again