动画和3D

动画

创建动画

		1.	@keyframes run {
        /* 从 */
        from{}
        /* 到 */
        to{
            transform: translateX(800px);
        	}
   		 }
    
		2.	@keyframes run2 {
        0%{}
        100%{
            transform: translateY(400px);
        }

使用动画

animation-name: run;

动画的运动时间

	animation-duration: 3s;

动画延迟时间

	animation-delay: 1s;

动画的运动曲线（和过渡完全一致）

animation -timing-function: steps(5); 

动画的运动次数 infinite无限次运动

animation-iteration-count: infinite;

动画的运动方向

animation-direction: alternate-reverse;
		 normal===正常，从起点运动到重点
		 reverse===反转，从重点运动到起点
		 alternate====正反交替
		 alternate-reverse===反正交替

动画的播放状态

		animation-play-state: paused;
			running===运动
		     paused===暂停
		一般要结合鼠标一起使用

简写方式：

animation:需要什么值就写什么
注意：运动时间和延迟时间有书写顺序，其他没有（运动时间在前，延迟时间在后）

画圆，半圆，扇形

要想画一个好看的半圆:一般建议宽度和高度做好2倍关系加圆角的时候圆角的值直接写宽高其中最大值的一半即可。
		1个值：上下左右4个角同时变化
		2个值：左上角和右下角  右上角和左下角
		3个值：左上   右上和左下  右下
		4个值：左上 右上  右下  左下 顺时针的赋值顺序

3d变形transform

坐标轴：

		x轴：向右为正，向左为负
		y轴：向下为正，向上为负
		z轴：向前为正，向后为负

要想看到3d的效果

	1.必须给想要呈现3d效果的元素找一个父亲，在这个大盒子上要写，transform-style: preserve-3d;
	2.必须适当的让3d空间(3d舞台)旋转一下

值

	1.位移translate
		transform: translateZ(0px);
	2.旋转rotate
		rotateZ===围绕z轴做旋转，其实围绕中心点旋转。
	3.缩放scale