*1.animation动画

属性	描述
@keyframes	规定动画模式。
animation	简写属性。`animation: 定义的动画名称持续时间运动曲线延迟执行播放次数播放方向。(infinite 表示无限次)`
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期应花费的时间。
animation-timing-function	规定动画的速度曲线。：linear ease-in-out steps()：不是连续执行，而是间断地分成几步执行
animation-delay	规定动画开始的延迟。
animation-iteration-count	规定动画应播放的次数。 //iteration的含义表示迭代，属性值`infinite`表示无数次。
animation-direction	定动画是向前播放、向后播放还是交替播放。`normal 正常，alternate 反向。`
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。`forwards`：保持动画结束后的状态（默认）， `backwards：`动画结束后回到最初的状态。
animation-play-state	规定动画是运行还是暂停。

、定义动画的步骤

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

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

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

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

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

*2.transition过渡

实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。值 | 描述 | | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | | transition-property | 规定设置过渡效果的 CSS 属性的名称。 | ||如果希望所有的属性都发生过渡包括宽度、背景色等），就使用all。 | transition-duration | 规定完成过渡效果需要多少秒或毫秒。 | | transition-timing-function | 规定速度效果的速度曲线。 | ||- linear 线性- ease 减速- ease-in 加速- ease-out 减速- ease-in-out 先加速后减速 | transition-delay | 过渡延迟，多长时间后再执行这个过渡动画。。 ||简写：transition: property duration timing-function delay;

3.transform

该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform: none|transform-functions;

值	描述	测试
none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值 `单位有：百分数/px`	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。

2D转换transform

2D转换包括：缩放、移动、旋转。属性 | 描述 | | --------------------------------------------------------------------------------------------------------- | ----------------- | | transform | 向元素应用 2D 或 3D 转换。 | | transform-origin | 允许你改变被转换元素的位置。

2D 转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。
位移
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。参数为`百分比`，`相对于自身移动`。- 正值：向右和向下。负值：向左和向上。`如果只写一个值，则表示水平移动`。`translate(50px, 100px);`
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
缩放
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。`transform: scale(x, y); transform: scale(2, 0.5)`;参数解释： `x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数`。如果`只写一个值就是等比例缩放`。取值：大于1表示放大，小于1表示缩小。`不能为百分比`。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度`scaleY(3)`倍数;
旋转
rotate(angle)	定义 2D 旋转，`transform:rotate(45deg);`正值顺时针；负值：逆时针
倾斜转换
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。`skew(20deg, 10deg)`;沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

位移应用：

让绝对定位中的盒子在父亲里居中我们知道，如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：

div {
        width: 600px;
        height: 60px;
        position: absolute;  绝对定位的盒子
        left: 50%;           首先，让左边线居中
        top: 0;
        margin-left: -300px;  然后，向左移动宽度（600px）的一半
    }

我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。现在，我们还可以利用偏移 translate 来做，这也是比较推荐的写法：

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

3D转换transform

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
	transform-style: `preserve-3d;` 让子盒子位于三维空间里 */transform-style: `flat;` 让子盒子位于此元素所在的平面内（子盒子扁平化）
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

CSS 3D 转换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
透视：
perspective(n)	定义 3D 转换元素的透视视图。
	- 作为一个属性，设置给父元素，作用于所有3D转换的子元素 - 作为 transform 属性的一个值，做用于元素自身。`perspective: 500px;`
移动：
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
	如果不加透视属性，是看不到translateZ的效果的。
缩放
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
旋转
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
	旋转效果，设置backface-visibility: hidden;可以旋转后隐藏

2.7 动画