Heim > Artikel > Web-Frontend > CSS3之动画相关_html/css_WEB-ITnose
CSS3之动画相关_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:201083Durchsuche
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属性。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css实现三角形及应用示例_html/css_WEB-ITnoseNächster Artikel：推荐几本学习HTML5比较好的书_html/css_WEB-ITnose