CSS3 animation related_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS3 animation related_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:51:20

Original

1128 people have browsed it

CSS3 animation related properties: transform, transition, animation.

TransformTransform

Syntax:

transform: rotate | scale | skew | translate |matrix;

rotate: Rotate, perform 2D rotation on the original element by specifying an angle. Positive value means clockwise rotation, negative value means counterclockwise. The default origin is its center position, you can set transform-origin.

scale: Scale, perform 2D scaling of the original element by specifying the scaling factor in the X and Y directions.

skew: Distortion, skewing the original element by specifying the skew angle in the X and Y directions.

translate: Move, move the element by specifying the movement length in the X and Y directions. Positive values move to the lower right.

matrix: matrix transformation

Example:

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>CSS3</title>    <style  type="text/css">        div{            width:100px;            height:100px;            background:#3385ff;             margin: 60px;        }        #rotate{             transform:rotate(30deg);        }        #scale{            transform:scale(2,1.5);        }        #skew{            transform:skew(30deg,10deg);        }        #translate{            transform:translate(50%,80%);        }    </style></head><body>    <div id="rotate">Rotate</div>    <div id="scale">Scale</div>    <div id="skew">Skew</div>    <div id="translate">Translate</div></body></html>

Copy after login

Picture:

Transition

Transition mainly contains four attribute values: the attribute for executing the transition: transition-property, the duration of the transformation: transition-duration, during the duration period, the rate of transformation changes transition-timing-function, and the transformation delay time transition -delay.

Example:

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>CSS3</title>    <style  type="text/css">        div{            width:100px;            height:100px;            background:#3385ff;             margin: 60px;        }        #transition{             transition:width 2s,height 2s;        }          div:hover{            width:200px;            height:200px;            transform:rotate(180deg);        }</style></head><body>    <div id="transition">Transition</div></body></html>

Copy after login

Picture 1

Picture 2 (mouse over)

Animation

animation is similar to transition. The difference is that transition needs to trigger an event before it can change CSS properties. Animation does not need to be triggered and can change CSS properties over time.