Home > Article > Web Front-end > CSS3 animation related_html/css_WEB-ITnose
CSS3 animation related_html/css_WEB-ITnose
- 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.