html5+css3（动画详解，过渡：transition，2D转换，3D旋转，移动，透视，3D呈现，translate，rotateX、rotateY、rotateZ）

动画详解

过渡：transition

transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

• 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。

• 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

• 综合属性：transition:让哪些属性进行过渡 过渡持续的时间 运动曲线 延迟时间;

• transition: all 3s linear 0s;

• 属性：

  /* 让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡，用all*/
  t transition-property:all ;ransition-property:width ; /* 只让盒子的宽度在变化时进行过度*/
  transition-duration:1s; /* 过渡的持续时间 */
  transition-timing-fuction:linear; /* 运动曲线*/
    /* 属性：
    linear：线性；
     ease:减速；
     ease-in：加速；
     ease-out：减速 ；
     ease-in-out：先加速后减速 */
  

  2D转换

• 转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。

• 转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。

• 在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。

• 2D转换包括：缩放、移动、旋转。

属性

/* 1. 缩放`scale`*/
transform:scale(x,y); /*  x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放*/

/* 2、位移：translate*/
transform: translate(水平位移, 垂直位移);

/*3、旋转：rotate */
transform: rotate(角度);
transform: rotate(45deg);
/*参数解释：正值 顺时针；负值：逆时针。*/

• 位移推荐做法 ，以前用margin-left：

	div {
	    width: 600px;
	    height: 60px;
	    background-color: red;
	    position: absolute;       绝对定位的盒子
	    left: 50%;               首先，让左边线居中
	    top: 0;
	    transform: translate(-50%);    然后，利用translate，往左走自己宽度的一半【推荐写法】
	}

	transform-origin: 水平坐标 垂直坐标;

	transform-origin: 50px 50px;

	transform-origin: center bottom;   //旋转时，以盒子底部的中心为坐标原点

3D

1、旋转：rotateX、rotateY、rotateZ

• 3D坐标系（左手坐标系）

• 浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。

• 旋转的方向：（左手法则）

• 左手握住旋转轴，竖起拇指指向旋转轴的正方向，正向就是其余手指卷曲的方向。

• 格式：

	transform: rotateX(360deg);    //绕 X 轴旋转360度

	transform: rotateY(360deg);    //绕 Y 轴旋转360度

	transform: rotateZ(360deg);    //绕 Z 轴旋转360度

• /* 透视*/ perspective: 200px;

  .box2 {
            background: url(images/bg.png) right 0 no-repeat;
            transform: rotateY(180deg); /*让图片的右半边默认时，旋转180度，就可以暂时隐藏起来*/

        }

        .box:hover .box1 {
            transform: rotateY(180deg); /*让图片的左半边转消失*/
        }

        .box:hover .box2 {
            transform: rotateY(0deg); /*让图片的左半边转出现*/
        }

2、移动：translateX、translateY、translateZ

格式：

	transform: translateX(100px);    //沿着 X 轴移动

	transform: translateY(360px);    //沿着 Y 轴移动

	transform: translateZ(360px);    //沿着 Z 轴移动

.box:hover {
            /* translateZ必须配合透视来使用*/
            transform: translateZ(400px);
        }

3、透视：perspective

• 作为一个属性，设置给父元素，作用于所有3D转换的子元素

• 作为 transform 属性的一个值，做用于元素自身。

4、3D呈现（transform-style）

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：

	transform-style: preserve-3d;     /* 让 子盒子 位于三维空间里 */

	transform-style: flat;            /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */

        @keyframes gun {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

动画

动画是CSS3中具有颠覆性的特征，可通过设置多个节点 来精确控制一个或一组动画，常用来实现复杂的动画效果。

1、定义动画的步骤

（1）通过@keyframes定义动画；

（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；

（3）在指定元素里，通过 animation 属性调用动画。

之前,我们在 js 中定义一个函数的时候，是先定义，再调用：

    js 定义函数：
        function fun(){ 函数体 }

     调用：
     	fun();

同样，我们在 CSS3 中定义动画的时候，也是先定义，再调用：

    定义动画：
        @keyframes 动画名{
            from{ 初始状态 }
            to{ 结束状态 }
        }

     调用：
      animation: 动画名称 持续时间；

其中，animation属性的格式如下：

          /*  animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次) */

            animation: move1 1s  alternate linear 3;

            animation: move2 4s;

（1）动画名称：

	animation-name: move;

（2）执行一次动画的持续时间：

	animation-duration: 4s;

备注：上面两个属性，是必选项，且顺序固定。

（3）动画的执行次数：

	animation-iteration-count: 1;       //iteration的含义表示迭代

属性值infinite表示无数次。

（3）动画的方向：

	animation-direction: alternate;

属性值：normal 正常，alternate 反向。

（4）动画延迟执行：

	animation-delay: 1s;

（5）设置动画结束时，盒子的状态：

	animation-fill-mode: forwards;

属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。

（6）运动曲线：

	animation-timing-function: ease-in;

属性值可以是：linear ease-in-out steps()等。

注意，如果把属性值写成** steps()，则表示动画不是连续执行**，而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。