Home  >  Article  >  Web Front-end  >  CSS3 animation related_html/css_WEB-ITnose

CSS3 animation related_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:51:201126browse

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>

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>

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.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn