CSS3 动画

在介绍CSS3动画之前，先来说一下CSS3。CSS3是CSS发展至今的最新版本，但是官方还没有给出确定的CSS3方案。现在95%的属性已经可以做到很好的兼容性，在各大浏览器可以运行自如。像一些基础属性，例如width，height，background，border等都属于CSS2.1的，而CSS3在CSS2.1的内容基础之上添加了新的语法，例如border-radius（圆角），:nth-of-type(结构性类)background-size（背景图大小）等。动画就是CSS3新增加的一类属性。（为处于疫情阶段还要努力学习的伙伴们，逆战班加油！）

Animation动画

此动画为逐帧动画，就是把整个过程分成100等分，每份为1%，这样一个动画播放的过程就是从0%播放到100%。那做出一个动画的关键，就是要确定动画的起始点和终止点。
1.animation常用属性
（1）animation-name：自定义动画名称。这个名字就像是class选择器的名字一样，每个动画都要起一个名字，不同元素可以有相同的名字，但是要见名思意，保证别人看到这个动画名，大概知道属于哪一类的运动，最好是用运动的英文全程来起动画名字。
（2）animation-duration：定义动画播放完所用时间。为了让动画展现出我们想要的效果，必须合理的设置动画的执行时间。此属性值要在数值后加上单位 s（秒）或者 ms（毫秒）。
（3）animation-delay：动画播放的延迟时间。当不同元素想相继变化时，可以设置不同的延迟时间来达到一种很漂亮的动画效果。例如：下载小图标loading的其中几种就是小圆在不同的延迟时间下放大缩小。此属性值要在数值后加上单位 s（秒）或者 ms（毫秒），也可以写负值，动画会提前执行。
（4）animation-iteration-count：定义动画的重复次数。很多时候我们想要动画不止执行一次，想要动画执行几次就写数字几。这里有一个特殊的属性值——infinite，此属性值定义了动画会执行无数次，只要不关掉代码的运行窗口，动画会无休止的执行下去，陪你度过无数个夜晚。
（5）animation-timing-function：定义动画的速度曲线。此属性规定元素在不同时间的运动速度（加速、减速、匀速等）。其中有几个常用值： linear（匀速）、ease（先加后减）、ease-in（从0开始加速的缓动）、ease-out（减速到0的动）、ease-in-out（前半段从0开始加速， 后半段减速到0）。大佬研究出一类自定义速度曲线——cubic-bezier贝塞尔曲线。如果上面的常用值不能满足你的需求，则可以去贝塞尔曲线（cubicbezier.com）去调节想要的任何运动曲线。
（6）animation：name duration delay iteration-count timing-function;此为动画属性的复合写法。当duration（动画播放时间）和delay（动画延迟时间）同时存在时，duration要写在delay的前面，即使把delay的值写在duration前面，系统也会自动的把前面的值识别为duration。除了duration和delay之外，其他属性值在复合写法中没有固定的顺序。
2.animation动画语法

选择器{animation:name duration delay iteration-count timing-function;}
@keyframes name{
	0%/from{}
	100%/to{}
}

动画是从0%执行到100%，在0%和100%之间可以指定任一个百分比时所执行的动画，合理规划好某一时刻的动画，才能完美的展现出想要的动画效果.（注：在默认的情况下，元素在执行完毕之后会回到起始位置。）

Transform变形

动画是由一个个动作组成，这些动作我们管它叫做变形。所有的变形操作都不会影响到其他元素，(类似于相对定位)，且变形操作只能加给block（块状元素）和inline-block（行内块元素），对inline(内联元素)不起作用的。transform变形属性常见的有五种，其中包括translate（平移）、scale（缩放）、rotate（旋转）、skew（斜切）和transform-origin（基点）。下面具体介绍一下：
1.translate：平移。下面为translate属性值的相关写法：
（1）transform:translate(num1,num2);//括号中num1和num2均为像素值，可以写两个值，前面值代表X轴，后面值代表Y轴，中间用逗号隔开；也可以写一个值（默认情况translate在X轴方向平移）；两种情况都要在具体数值后加单位px（像素）。括号中的值除了可以写具体数值外，还可以写百分比，代表平移元素本身百分之几的距离。
（2）transform:translateX(num);//定义为延X轴平移；
（3）transform:translateY(num);//定义为延Y轴平移；
（4）transform:translateZ(num); //定义为延Z轴平移 ( 3d ）；
2.scale：缩放。下面为scale属性值的相关写法：
（1） transform:scale(num);// num是一个比例值，正常比例是1；
（2）transform:scale(num1 , num2);//两个值 分别对应宽和高；
（3） transform:scaleX(num);//X轴方向缩放；
（4）transform:scaleY(num);//Y轴方向缩放；
（5）transform:scaleZ(num) ;//Z轴方向缩放( 3d )；
3.rotate：旋转。下面为rotate属性值的相关写法：
（1）transform:rotate(num);//num是旋转的角度，可以写正值，也可以写负值， 正值为顺时针旋转，负值为逆时针旋转。在数值后要加单位 deg（角度，常用）或rad（弧度）；
（2） rotateX(num);//绕X轴旋转( 3d )；
（3）rotateY(num);//绕Y轴旋转( 3d )；
（4）rotateZ(num);//绕Z轴旋转（ 注 : rotate()跟rotateZ()是等价关系。）；
4.skew：斜切。下面为skew属性值的相关写法：
（1） transform:skew(num1,num2) ;//num1和num2都是角度，针对的是x轴 和 y轴；
（2）transform:skewX(num);//X轴方向斜切 ；
（3）transform:skewY(num);//Y轴方向斜切；
注：skew没有3d写法。
5.transform复合写法：以上这些属性可以复合到一条声明中书写，没有固定顺序，从后面的属性值往前执行。需要注意的是，translate在后面书写时，平移的方向和距离会受到前面的属性值影响。例如：transform：rotate(45deg) translate(100px);此条声明为元素向右下角平移100px，再绕元素中心点顺时针旋转45度。
6.tranform-origin:基点位置。基点就是元素变形的依据点，主要是针对旋转和缩放，在基点建立坐标系，按要求在固定轴的固定方向进行旋转和缩放。元素的默认基点为元素的中心点，如有需求，可以重新设置。

Animation动画扩展

除了上述所说的animation属性外，还有一些特殊的动画属性。
1.animation-fill-mode : 定义动画播放前后，其动画效果是否可见。以下为其属性值：
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效；
backwards : 在延迟的情况下，让0%在延迟前生效；
forwards : 在运动结束的之后，停到结束位置；
both : backwards和forwards同时生效；
2.animation-direction : 定义播放动画的方向。以下为其属性值：
normal (默认值) : 永远都是正向 , 从0%~100%；
alternate : 一次正向，一次反向；
reverse : 永远都是反向 , 从100%~0%；

CSS3动画库

animation.css是一款强大的预设CSS3动画库，有了它，我们就可以在动画世界里尽情引用，各种动画效果任你选择。官网地址：https://daneden.github.io/animate.css/。在引用动画时，每个动画效果都需要加上animated(基类)，是动画的基础样式；此外还可以添加动画的执行次数，infinite可以定义动画无限次的执行。如果想改变一个动画的播放时间，需要在css文件中修改animated样式里的时间。

3D效果

为了使动画更加立体，这里有一些属性可以实现3D效果，让动画看起来更炫酷，更完美。
1.perspective(景深，又名3D眼镜) : 定义离屏幕多远的距离去观察元素。值越大，动画效果越不明显。像变形中 rotateX、rotateY、translateZ、scaleZ都是3D效果，给加动画元素的父元素设置合适数值的景深，就能观察到完整的动画效果。（ 注：反馈回来的立体，仅限于平面）
2.transform-style : 3D控件。只要是有厚度的立体图形，就必须添加3D控件，这样才能看到有厚度的立体图形。此属性有两个属性值flat(默认值，2d)和preserve-3d (3d)，一般都设置后者，产生一个三维空间。
3. tranform-origin : x y z; //3d模式下的基点(注：z不能写单词，只能写数字)
4. perspective-origin : 视角，观察元素的角度。
5. backface-visibility : 背面隐藏。有两个属性值 hidden、visible (默认值)。
6. 3d写法( 扩展 )：
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值
0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg，
例：rotate3d(1,1,1,30deg);

动画制作过程

这里来总结一下，要想做好一个完整的动画，要思考的关键和制作步骤。
1.关键：要确定动画的起始值和结束值。
2.制作步骤：
（1）先把静态效果做出来；
（2）把要运动的终点位置先做出来；
（3）指定transform变形中对应的0值（结束点的位置）；
（4）写transform变形的起点值（起点位置）；
（5）分析元素运动轨迹，合理定义动画在某一刻的状态。

旋转立方体

下面提供一个3D彩色旋转立方体的实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!-- 以上和底下的body标签为基础结构 英文状态下！+tab键就可以调出-->

    <!-- 引入内部样式表 -->
    <style>
    /* 清除默认样式 */
    *{ margin:0; padding:0;}
    a{text-decoration: none;}
    img{display: block;}
    ul{ list-style: none;}
    /*Ending  清除默认样式 */

    #box{ width:300px; height: 300px; border:1px black solid; margin:30px auto;
          perspective: 500px;/*景深，距离元素500px观察*/
          perspective-origin: right top;/*视角，在元素的右上角观察*/
    }
    #box ul{ width:100px; height:100px; margin:100px;
             position: relative;/*相对定位，相对于本身元素进行偏移*/
             transform-style: preserve-3d;/* 3d控件 */
             transform-origin: center center -50px;/* 旋转基点 */
             animation: rotate 4s infinite linear;/* 动画名rotate 一次动画播放所用时间4s 播放次数无限次 匀速播放 */
    }
    /* 动画定义 */
    @keyframes rotate{
        0%{transform:rotateY(0deg);}/* 元素初始状态 */
        100%{transform:rotateY(360deg);}/* 元素结束状态 */
    }
    /*Ending 动画定义 */
    #box ul li{ width:100%; height: 100%; position: absolute; left:0; top:0; text-align: center; line-height: 100px; font-size:30px;  backface-visibility: hidden;/* 背景隐藏 */}
    #box ul li:nth-of-type(1){ background:red;}
    #box ul li:nth-of-type(2){ background:blue; left:100px; 
        transform-origin:left;/* 以元素左边线为旋转基线 */
         transform:rotateY(90deg);/* 绕X轴向里旋转90度*/}
    #box ul li:nth-of-type(3){ background:green; left:-100px;
        transform-origin:right;/* 以元素右边线为旋转基线 */
         transform:rotateY(-90deg);/* 绕X轴向外旋转90度*/
    }
    #box ul li:nth-of-type(4){ background:hotpink; top:-100px;
        transform-origin:bottom;/* 以元素下边线为旋转基线 */
         transform:rotateX(90deg);/* 绕X轴向里旋转90度*/
    }
    #box ul li:nth-of-type(5){ background:gray; top:100px;
        transform-origin:top;/* 以元素上边线为旋转基线 */
         transform:rotateX(-90deg);/* 绕X轴向外旋转90度*/
    }
    #box ul li:nth-of-type(6){ background:yellow;
        transform:translateZ(-100px) rotateY(180deg);/* 绕Y轴向右旋转180度 再延Z轴向里平移100px*/
    }
    </style>
<!--Ending  引入内部样式表 -->
</head>
<!-- 立方体结构 -->
<body>
    <div id="box">
        <ul><!-- 列表 -->
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</body>
<!--Ending 立方体结构 -->
</html>

注：在立方体中默认会沿着第一个面进行旋转。