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:矩阵变换
例子:
CSS3 Rotate Scale Skew Translate
图:
过渡Transition
transition主要包含四个属性值:执行过渡的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。
例子:
CSS3 Transition
图1
图2(鼠标放上去)
动画Animation
animation类似transition,不同的是transition需要触发事件才可以改变CSS属性,animaition不需要触发,就可以随时间变化改变CSS属性。