CSS animation effects

1.2d,3d Conversion

-1. With 2d,3d conversion, we are able to move, scale, rotate, lengthen, or stretch the elements.

Conversion is an effect that makes an element change shape, size, and position.

You can use 2D or 3D transformations to convert elements.

-2.2d (Transform) Conversion method

1.translate (x, y) move, default is 0 when the second parameter is not provided

2.rotate (xdeg) rotation

3.scale (x, y) scaling

4.skew (xdeg,ydeg) tilt, default is 0 when the second parameter is not provided

-3.3d Conversion method

1.rotateX ()

2.rotateY ()

<! DOCTYPE html>{width:100px;Height:100px;Background-color:Aquamarine; }. Change{/**/            /*transform:translate (100px, 200px);*/            /*Rotate*/            /*transform:rotate (30deg);*/            /*Zoom*/            /*Transform:scale (0.5, 0.5);*/            /*Tilt*/            /*Transform:skew (50deg,50deg);*/            /*Transform:rotatex (120deg);*/Transform:Rotatey (120deg); }</style>

Browser kernel

Webkit (Chrome/safari)-webkit-transform

Gecko (Firefox)-moz-transform

Presto (Oprea)-o-transform

Trident (IE)-ms-transform

　　

2. Transition

1. With CSS3, we can change the element from one style to another without the use of any flash animation or JavaScript

When you add an effect to an element.

2.CSS3 transitions are the effects of an element gradually changing from one style to another.

Specify which CSS property the effect is added to

Duration of the specified effect

Transiton Shorthand property for setting 4 transition properties in one property

TRANSITION-PROPERTY Specifies the name of the CSS property that the transition is applied to, and must have

Transition-duration defines the time taken by the transition effect, which defaults to 0 and must have

Transition-timing-function the time curve that specifies the transition effect, which defaults to "ease"

-1.linear: Linear transition, equivalent to Bezier curve (0.0, 0.0, 1.0,1.0)

-2.ease: Smooth transition, equivalent to Bezier curve (0.25,0.1,0.25,1.0)

-3.ease-in: From slow to fast, equal to Bezier curve (0.42,0.0,1.0,1.0)

-4.ease-out: From fast to slow, equal to Bezier curve (0.0,0.0,0.58,1.0)

-5.ease-in-out: From slow to fast to slow, equal to Bezier curve (0.42,0.0,0.58,1.0)

TRANSITON-DELAY specifies when the transition effect starts, default is 0

　　

<! DOCTYPE html> First{width:100px;Height:100px;Background-color:Aquamarine;transition:width 2s ease-in-out;/*transition:background-color 2s;*/}. First:hover{width:200px;/*background-color:purple;*/}</style>

CSS animation effects