HTML5学习（三 关于2d转换和动画部分）

关于css3中2d的转换（transform），动画部分小结
1.移动： translate；

transform: translate(x, y)
transform: translateX(n) //x 就是 x 轴上水平移动
transfrom: translateY(n) //y 就是 y 轴上水平移动

translate可以进行水平，垂直方向上的移动，他最大优点还是不会影响其他元素的位置，如果赋值是百分比，那么是相对于自身的长宽。

2.旋转： rotate

//单位是：deg 
transform: rotate(度数) 

rotate 里面要跟deg度数的单位，当角度为正时，是顺时针，负时，为逆时针，默认的旋转中心点是元素的中心点。

设置旋转中心点 ：

transform-origin: x y; //注意后面的参数 x 和 y 用空格隔开,
					   //还可还有输入方位名词
						

3 缩放.： scale

transform: scale(x, y)

注意：

• 注意，x 与 y 之间使用逗号进行分隔
• transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
• transform: scale(2, 2): 宽和高都放大了二倍
• transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
• transform:scale(0.5, 0.5): 缩小
• scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子，转换使用transform-origin；

4.综合写法
transform: translate() rotate() scale()；

注意：

• 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
• 但我们同时有位置或者其他属性的时候，要将位移放到最前面

5.动画(animation)
第一步先创建动画：

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

第二步在使用动画：

div {
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间；
}

动画常见的属性：

简写方式：

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

一些要点：

• 简写属性里面不包含 animation-paly-state
• 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
• 要想动画走回来，而不是直接调回来：animation-direction: alternate
• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards
• animation-timing-function: 规定动画的速度曲线，默认是ease，匀速是linear，指定是steps();