移动互联-CSS动画

css动画

1.1移动transform

不能在同一个元素上添加多个transform，后面的transform会覆盖掉前面的

transform只会对于 块级元素 生效，非块级元素，需要进行元素转换

多个transform属性值的使用，可以写在一个transform里面

transform: rotate(10deg) translateX(100px) skew(10deg) scale(0.5);

注意：顺序不同，会导致最后的位置不同

名称	解析
平移	单位px，或%
translate(a)	a——水平平移的位置
	a>0 水平向右平移
	<0 向左平移
	=0 保存原生位置不变
translate(a,b)	正正 右下
	正负 右上
	y轴 向下为正，向上为负！
控制某一轴的平移方向	translateX 水平方向
	translateY 垂直方向
旋转	单位deg， 旋转，绕着原点/中心点
rotate(a)	a>0 顺时针
	a<0 逆时针
绕着x轴的旋转	沿水平方向旋转，顺时针为正，逆时针为负
绕着Y轴的旋转	3D中，y轴向下为正，沿垂直方向旋转，相对于自己来说，逆时针为正向右转，顺时针为负向左转
缩放
scale(a)缩放	a——倍率
一个值：控制水平方向+垂直方向的缩放比例	0<a<1 缩小
	a>1 放大
	a=0 让元素消失/被隐藏了，但是不会删除元素
	a=1 不变
	a=-1 大小不变，镜像显示
	a<0 负数，倒向
	0<|a|<1 缩小
	|a|>1 放大
只控制水平方向