前端学习之css2d动画

前端学习

CSS过度动画(transition)

css的transition属性可以在不使用Flash动画或JavaScript的情况为样式下为元素添加效果。
过度动画：从一个状态渐渐的过渡到另一个状态
语法：transition:要过渡的属性 花费时间 运动曲线 何时开始 (若有多组属性变化，可以用逗号隔开)。
属性
transition
简写属性，用于在一个属性中设置四个过度属性
transition-property
规定应用过度的CSS属性的名称
** transition-duration**
定义过度效果花费的时间，默认是0
** transition-timing-function**
规定过度效果的时间曲线。默认是ease。
** transition-delay**
规定过度效果何时开始。默认是0.
举个例子
transition:width 0.3s ease 0;
transition:width 0.3 ease 0,height 0.5 ease 0;(多属性)
另一写法：transition:all 0.3; all 直接选择所有变化效果。

2D变形(transform)

位移
水平方向和垂直方向同时移动.
transform:translate(X,Y);
只移动X或Y轴，X、Y需大写。
translateX/Y:(X/Y);
translate属性可以使绝对定位的盒子居中显示。
1、给盒子设置top：50% left:50%
2、transform:translate(-50%,-50%); 当translate里面的数值为负数时，移动该元素自身的一半，与父元素无关。

缩放
使元素水平方向和垂直方向同时缩放。
transform:scale(X,Y);

元素仅水平方向缩放
transformX:scaleX(x);

元素仅垂直方向缩放
transformY:(y);

若参数X,Y只设置一个，则默认两个都进行一样的操作
举个栗子：transform:scale(0.8,1); 水平方向上缩小了20%

旋转
语法:transform:rotate(45deg);
括号内的为度数 正值为顺时针，负值为逆时针。

rotateY( ) rotateX( ) Y轴或X轴的旋转。

transform-origin
可以调整元素转换变形的原点
栗子： transform-origin: left top; 左上角

倾斜
语法：transform:skew(0,0);
第一个参数代表水平方向，第二个是垂直方向。若只写一个参数第二个参数默认为0。