CSS3中的动画属性详解

开篇一张图，内容全靠编！！！

是的，这次我们讲的就是做个简单的css3小动画
那么css3动画是怎么完成的呢？
css3里面动画我们可以分成2D动画和3D动画。首先，我们需要了解一下css3动画都有些什么属性。

2D动画的属性：

变形属性transform：
位移—translate()、缩放—scale()、旋转—rotate()、倾斜—skew()。

transform:translate(参数1，参数2)---------位移属性

具体有两个属性值：属性值1，属性值2 。属性值1是指在x轴上移动的距离，属性值2是指在y轴上移动的距离，单位是px。值的大小可以是正数也可以是负数，x轴往左为正，y轴往下为正，反之为负！也可以单独的进行x轴或y轴的移动：transform:translateX(参数);或者transform:translateY(参数);在这里我们需要注意X/Y是需要大写的。
相信在这里很多小伙伴都想到位移属性很是类似定位属性position，在很多情况下，我们需要结合这两个属性同时添加在一个元素上形成一个简单的2D动画。

transform:scale()----------2D缩放

缩放属性是让元素根据中心原点对对象进行缩放。默认值是1，这里的参数没有单位，1以下的任何值，使一个元素缩小，0则是消失；而任何大于1的值，会让元素变得更大。缩放属性的属性值和位移属性的属性值是类似的语法，可以是一个值，也可以有两个属性值：只有一个值的时候第二个值和第一个值是相等的，所以我们一般都是只写一个；两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。也是可以单独对x轴y轴进行设置： transform:scaleX();或者 transform:scaleY();同样这里的X/Y也是是需要大写的。

transform:rotate()---------2D旋转

旋转rotate()是指通过设定的角度参数对元素根据原点指定一个2D旋转。所以这里的值是指旋转的是度数，单位是deg。默认情况下是绕着中心点进行转动的；如果这个值为正值，则是元素对原点中心顺时针旋转；反之如果这个值为负值，元素对原点中心进行逆时针旋转。同样也是可以单独对x轴y轴进行设置：rotateX() ，指元素围绕其 X 轴以设定的度数进行旋转； rotateY() ，元素围绕其 Y 轴以设定的度数进行旋转。这里的X/Y也是是需要大写的。

transform:skew()----------2D倾斜

倾斜skew()是指通过设定的角度以其中心位置围绕着X轴和Y轴按照一定的角度倾斜显示。
一个参数时：表示水平方向的倾斜角度；两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。同样也是可以单独对x轴y轴进行设置：transform:skewX() ；transform:skewY()；这里的X/Y也是是需要大写的。

注：另外transform有变换属性综合使用时，尽量先写位移再写其他变换属性 ，不然会对位移产生影响

transform-origin ---------- 变形原点

讲完了上面的那4个属性大家都应该发现了一个问题，4个属性都有一个默认的变形原点，那么我们如果需要让它换一个点进行变形呢？在这里就需要用到变形原点—transform-origin属性了。该属性只有在设置了transform属性的时候会起作用，相对变形嘛。transform-origin也有两个属性值：transform-origin:（水平方向 垂直方向），值可以为方向值（left、center、top等），也可以是以px、%为单位的数值。

3D动画的属性

3D动画，其实说白了，无非就是在2D的水平x轴、垂直y轴的基础上增加了一个垂直屏幕的z轴。不过为了方便观察，我们通常看到的3D是这样展现的：
增加了一个z轴之后我们所呈现出来的就是立体的。就像开篇那个gif图一样。3D效果图既然看到的是立体的，就存在一个问题了。我们平时所看到的人或物都是近大远小。那在这里我们怎么实现呢？随之而来的是css3为我们提供的属性景深： perspective

perspective---------景深

perspective属性是指我们观察元素的距离，视线的距离，从而展现给我们一种近大远小的视觉。
属性值通常在900px-1200px之间，那是因为低于或超过了这个数值范围，反馈给我们的视觉效果就不会很明显，基本上就不会有近大远小的感觉。一般我们把这个属性设置在父元素上如：**perspective: 1200px;**也可以设置在子元素上如：transform:perspective(1200px);当然这两个同时设置会产生冲突！建议只设置在父元素即可！

perspective-origin

横看成岭侧成峰，远近高低各不同。观察的角度不一样所看到的就不一样！就像大家小学时学的一篇课文《画杨桃》，相信大家都会有印象。由此css3也为我们提供了这么一个属性方便我们观察3d元素。
观察3d元素的（位置）角度，perspective-origin:参数1 参数2; 参数可以是方位值（left、center等），也可以是以%为单位的数值。

transform-style

讲了这么多还有一个最关键的属性就是我们要把我们需要设置3D元素的空间形成一个3D空间，从而transform-style属性由之而来。
transform-style属性是3D空间的一个重要属性，指其嵌套元素在3D空间中呈现！transform-style有两个属性值，默认值是flat，表示的是平面空间，所有子元素在2D平面呈现。另外一个属性值就是preserve-3d，表示的是3D空间，所有子元素在3D空间中呈现！

同样的3D动画也需要用到变形属性transform，所有的属性和属性值与2D是大同小异！
具体如下：

transform:translate(x,y,z);--------3D的位移

​ translateX() 元素在x轴上的位移
​ translateY() 元素在y轴上的位移
​ translateZ() 不能是百分比数值

transform:rotate();—3D的旋转

​ rotateX() 元素围绕其 x 轴以设定的度数进行旋转
​ rotateY() 元素围绕其 y 轴以设定的度数进行旋转
​ rotateZ() 元素围绕其 z 轴以设定的度数进行旋转
​ rotate3D(x,y,z,a) --------[ 0不旋转。1旋转 ]
​ x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
​ y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
​ a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

transform:scale3d(x,y,z);—3D的缩放

scaleX() 元素只在x轴上缩放元素
​ scaleY() 元素只在y轴上缩放元素
​ scaleZ() 元素只在z轴上缩放元素

好的，在这里2D/3D变形属性说的差不多了，那接下来让我们了解形成动画最最最关键的两个重点：

一 . 制定关键帧！！！

制定关键帧用的是@keyframes属性，指定关键帧主要有两种方法：
方法一：
@keyframes 关键帧名称{
from{初始状态属性}
to{结束状态属性}}

方法二：
@keyframes 关键帧名称{
0%{初始状态属性}
50%（中间还可以再添加关键帧）
100%{结束状态属性}
其中关键帧名称是自己命名的，当然，默认符合命名规范方便区分！方法一有一定的局限性，from指定初始状态，to指定结束状态。
而方法二则灵活多变：0%指定初始状态，中间可以视情况添加多个关键帧，100%指定结束状态。

二 .调用关键帧！！！

调用关键帧用的是animation属性，animation含多个属性，具体如下：

animation-name

所应用的动画名称（关键帧名称），必须配合@keyframes使用。

animation-duration

动画持续的时间，例：animation-duration:3s; 即为动画的持续时间为3s。

animation-timing-function

动画的运动状态：
linear：匀速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:马上跳到动画每一结束桢的状态,没有中间的过渡效果（可实现逐帧动画）

animation-delay

动画的延迟时间，例：animation-delay:5s; 即为动画开始前延迟的时间为5s。

animation-iteration-count

动画的循坏次数：
infinite： 无限循环
number: 循环的次数

animation-direction

动画在循环中是否反向运动：
normal： 正常方向。
reverse： 反方向运行。
alternate： 动画先正常运行再反方向运行，并持续交替运行。
alternate-reverse：动画先反运行再正方向运行，并持续交替运行。

animation-play-state

设置动画的状态
running: 运动
paused: 暂停
例：animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

当然看到这里，小伙伴们会不会觉的很费劲，简写来了：
animation:关键帧的名称 动画持续的时间 运动状态(linear(匀速)) 动画延迟的时间 动画的循环次数 动画的运动方式(设置正向或者反向)
这也是我们常用的写法，中间用空格隔开。

到这里，css3动画的属性我们就已经了解的差不多了，如有不足之处，望大神们不吝赐教。
最后，附上简单2D动画一幅，主要利用了2D缩放，图片大家可以另换：

<!-- css样式 -->
		body{
            background: black;
        }
        div{
            width: 300px;
            height: 285px;
            position: fixed;
            top: 0;bottom: 0;
            left: 0;right: 0;
            margin: auto;
        }
        div img{
            position: absolute;
            top: 0;
            opacity: 1;
            transform: scale(0);
        }
        .img1{
            animation: imgscale 2s linear infinite;
        }
        .img2{
            animation: imgscale 2s 3s linear infinite;
        }
        .img3{
            animation: imgscale 2s 6s linear infinite;
        }
        .img4{
            animation: imgscale 2s 9s linear infinite;
        }
        .img5{
            animation: imgscale 2s 12s linear infinite;
        }
        @keyframes imgscale{
            0%{transform: scale(0);opacity: 0;}
            16%{transform: scale(.5);opacity: .33;}
            33%{transform: scale(1);opacity: .66;}
            50%{transform: scale(1.5);opacity: 1;}
            67%{transform: scale(2);opacity: .66;}
            84%{transform: scale(2.5);opacity: .33;}
            100%{transform: scale(3);opacity: 0;}
        }
<!-- html结构 -->
        <div>
        	<img class="img1" src="./image/a.gif" alt="">
        	<img class="img2" src="./image/a.gif" alt="">
        	<img class="img3" src="./image/a.gif" alt="">
        	<img class="img4" src="./image/a.gif" alt="">
        	<img class="img5" src="./image/a.gif" alt="">
   		</div>

效果如下：

谢谢！