前言：
1、 什么是css动画：使用css技术来控制页面元素css属性的变化
2、css动画优势：不需要用js也能写，比较流畅，由浏览器去执行动画，减少代码量，性能比较高
过渡
过渡的理解
-需要在某种条件下触发，例如hover、active、focus情况下
过渡的4个属性
| 序号 | 意义 | ||
| 1 | ['prɔpəti] |
1、所有数值类型的属性，都可以参与过渡， 比如width、height、left、top、border-radius、opacity,颜色等 2、从一个有效数值向另一个有效数值进行过渡 | |
| transition-duration | 指定过渡效果的持续时间（必填） | ||
| 3 | 过渡变化曲线（缓动效果）（选填） | *ease [i:z] 默认值，慢速开始，先加速，然后再减速 *linear 匀速运动 ease-out 先快后慢 减速运动 *steps()分布执行过渡效果 | |
| 4 | 过渡效果的延迟，等待一段时间后执行过渡（选填） | ||
| 5 | 同时设置过渡相关的所有属性（选填，过渡时间是必写） | 则两个时间中,第一个写过渡时间，第二个写延迟时间 |
自定义动画
动画的理解
- 过渡必须有触发条件，例如hover，acitve时，动画可以自动触发动画
- 过渡只有开始和结束帧，动画可以设置复杂过程
- 过渡只能执行一次，动画可以自定义执行次数
制定关键帧用的是@keyframes属性，指定关键帧主要有两种方法：
1、帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写， 默认也是原始设置
@keyframes text {
/* from表示动画开始位置 也可以使用0%*/
from {
margin-left: 0;
}
/* to动画的结束位置 也可以使用100%*/
to {
margin-left: 500px;
}动画属性
| 序号 | 意义 | ||
| 1 | 绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画(必填) | 设置动画的名字，和@keyframs相对应，可以设置多个动画， 逗号隔开，应用多个动画 | |
| animation-duration | 时间单位：s ms | ||
| animation-timing-function | *ease [i:z] 默认值，慢速开始，先加速，然后再减速 ease-in 先慢后快 加速运动 ease-in-out 以慢速开始和结束的过渡效果 cubic-bezier(n,n,n,n)立方贝塞尔曲线函数，值是0-1之间的数值 | ||
| 4 | 动画在启动前的延迟间隔 | ||
| 5 | [,itə'reiʃən] | n 定义动画播放n次 | |
| 6 | 指定是否应给轮流反向播放动画 | reverse 从to到from运行，每次都是这样 * alternate 从from向to运行，重复执行动画时反向执行 alternate-reverse 从to向from运行，重复执行动画时反向执行 | |
| 7 | 规定当动画不播放时（完成时，延时未开始播放时），应用到的元素样式 | * forwards 动画执行完毕，会停止在动画结束的位置 both 结合了forwards和backwards的特点 | |
| animation-play-state | running 默认值 动画执行 | ||
| 9 | 简写，可以写以上任意属性的可选值 | animation:关键帧的名称 动画持续的时间 运动状态(linear(匀速)) 动画延迟的时间 动画的循环次数 动画的运动方式(设置正向或者反向) |
变形2D
变形属性transform：translate() scale() rotate() skew()；
位移 transform: translate();
参数值1:是指在x轴上移动的距离,正值，元素向右移动，负值向左移动，
参数2:是指在y轴上移动的距离，正值向下，负值向上，参数2默认为0
translateZ()沿着z轴方向平移 结合视距起作用.不能是百分比数值（3d变化）
- 1、平移元素，可以是数字，可以是百分比，百分比是相对于自身计算的
- 2、位移的参考原点是元素的原来所处的位置
- 3、如果是通过active进行位移，执行完毕后会还原
- 4、 不会影响别的元素
- 5、对于行内元素是没有效果的
//垂直水平居中的效果
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* transform: translateX(-50%) translateY(-50%); */旋转transform: rotate();
x轴y轴z轴进行设置：这里的X/Y/Z也是是需要大写的。
rotateX() ，指元素围绕其 X 轴以设定的度数进行旋转
rotateY() ，元素围绕其 Y 轴以设定的度数进行旋转
rotateZ() , 元素围绕其 Z 轴以设定的度数进行旋转
缩放 transform:scale();
这里的参数没有单位，1以下的任何值，使一个元素缩小，0则是消失；而任何大于1的值，会让元素变得更大。
两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。x轴y轴进行设置：同样这里的X/Y/Z也是是需要大写的。
transform:scaleX();元素只在x轴上缩放元素
transform:scaleY();元素只在y轴上缩放元素
倾斜 transform:skew()
skew()是指通过设定的角度以其中心位置围绕着X轴和Y轴按照一定的角度倾斜显示。
x轴的倾斜x角度,y轴默认为0；
x轴的倾斜角度，第二个参数表示y轴的倾斜角度。
deg
x轴y轴进行设置：这里的X/Y也是是需要大写的。
变形原点 transform-origin
transform-origin 改变原点的位置
transform-origin属性，该属性只有在设置了transform属性的时候会起作用也有两个属性值：
transform-origin:（水平方向 垂直方向），默认值transform-origin:（center center）
值可以为方向值（left、center、top、right、bottom等），也可以是以px、%为单位的数值
变形3D
父元素样式：
3d变化：transform-style：preserve-3d; 默认值flat
（景深）：perspective [pə'spektiv] 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px
html{perspective: 800px; },
父元素上，例如：perspective：800-1200px；一般为900px-1000px
位移 :translate3d translateX translateY translateZ
translateX(x)translateY(y)translateZ(z)参数单位为px
旋转:rotate3drotateXrotateYrotateZ
角度) rotateY(角度) rotateZ(角度) 沿着元素中心点穿过的某个轴旋设置的角度deg
缩放：scale3d scaleXscaleYscaleZ
scaleX(x) scaleY(y) scaleZ(z) ,分别代表x和y轴方向缩放相应的倍数
动画库
| 序号 | 线上css | |
| href="https://animate.style/#documentation" https://animate.style/#documentation |
