Maison > Article > interface Web > CSS3之动画相关_html/css_WEB-ITnose
CSS3之动画相关_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:51:201083parcourir
CSS3动画相关的属性：transform,transition,animation.
变形Transform
语法：
transform: rotate | scale | skew | translate |matrix;
rotate:旋转，通过指定一个角度对原元素进行2D旋转，正值表示顺时针旋转，负值表示逆时针。默认原点是其中心位置，可以设置transform-origin.
scale:缩放，通过指定X和Y方向上的缩放倍数对原元素进行2D缩放。
skew:扭曲，通过指定X和Y方向上的斜切角度，对原元素进行斜切变换。
translate:移动，通过指定X和Y方向的移动长度对元素进行移动，正值是向右下移动的。
matrix:矩阵变换
例子：
<!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> 图：
过渡Transition
transition主要包含四个属性值：执行过渡的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。
例子：
<!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> 图1
图2（鼠标放上去）
动画Animation
animation类似transition，不同的是transition需要触发事件才可以改变CSS属性，animaition不需要触发，就可以随时间变化改变CSS属性。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：css实现三角形及应用示例_html/css_WEB-ITnoseArticle suivant：推荐几本学习HTML5比较好的书_html/css_WEB-ITnose