一、什么是css动画？
1、使⽤css技术来控制⻚⾯元素 css属性 的变化。
2、css动画优势：不需要⽤js也能写，⽐较流畅，由浏览器去执⾏动画，减少代码量，性能⽐较⾼
3、⼀般兼容到ie10以上浏览器（⼀般没太⼤问题）
二、过渡
1.过渡的理解
过渡（transition）[træn'siʒǝn]
-通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡
-需要在某种条件下触发，例如hover、active、focus情况下
-⼀次性的效果，不能循环，只能做简单的动画
-只有两帧，设置动画初始值和结束值
-IE10开始兼容，移动端兼容良好
2.过渡的4个属性
1、transition-property
哪些属性要过渡（选 填）
none 没有属性获得过 渡效果
all 所有属性都参与过 渡 默认值
property ⾃定义应⽤ 过渡效果，⼀个或多 个，⽤空格隔开
注意：
1、所有 数值类型 的属 性，都可以参与过渡， ⽐如width、height、 left、top、border，radius、opacity等
2、从⼀个有效数值 向另⼀个有效数值进⾏ 过渡
2、transition-duration
指定过渡效果的持续时 间（必填）
时间的单位：s和ms ，1s=1000ms
3、 transition-timingfunction
过渡变化曲线（缓动效 果）（选填）
ease [i:z] 默认值，慢速开始，先加速，然后 再减速
linear 匀速运动 ease-in 先慢后快 加 速运动 ,ease-out 先快后慢 减 速运动 ,ease-in-out 以慢速开 始和结束的过渡效果
steps()分布执⾏过渡 效果
cubic-bezier(n,n,n,n) ⽴⽅⻉塞尔曲线函数， 值是0-1之间的数值
4、transition-delay
过渡效果的延迟，等待 ⼀段时间后执⾏过渡 （选填）
时间的单位：s和ms ,1s=1000ms
5、transition
同时设置过渡相关的所 有属性 （选填，过渡时间 是必写）
只有⼀个要求，如果要 写延迟， 则两个时间中,第⼀ 个写过渡时间，第⼆个 写延迟时间.
三、动画
1.动画的理解
动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发， 例如hover，acitve时，动画可以⾃动触发动画.
第⼀步：先要设置⼀个关键帧，关键帧设置了动画每⼀个步骤
制定关键帧⽤的是@keyframes属性，指定关键帧主要有两种⽅法：
⽅法⼀：
@keyframes 关键帧名称{
from{初始状态属性}
to{结束状态属性}}
⽅法⼆：
@keyframes 关键帧名称{
0%{初始状态属性}
50%（中间还可以再添加关键帧）
100%{结束状态属性}
注意：
1、帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写， 默认也是原始设置
2、可以同时设置关键帧，⽤逗号（,）隔开就⾏
第⼆步 调⽤关键帧
2.动画属性
1、animation-name
绑定到选择器的关键帧 的名称，告诉系统需要 执⾏哪个动画 (必填)
2、animation-duration
动画的完成时间，告诉 系统动画持续的时长 （必填）
animation-timingfunction
设置动画如何完成一个 周期，告诉系统动画执 行的速度（与过度动画 类型）
3、animation-delay
动画在启动前的延迟间 隔
4、animation-iterationcount
动画的播放次数，告诉 系统动画需要执行几次
5、animation-direction
指定是否应给轮流反向 播放动画
6、animation-fill-mode
规定当动画不播放时 （完成时，延时未开始 播放时），应用到的元 素样式
7、animation-play-state
告诉系统当前动画是否 需要暂停
8、animation
简写，可以写以上任意 属性的可选值
animation: 关键帧的名 称 动画持续的时间 运 动状态(linear( 匀速 )) 动 画延迟的时间 动画的循环次数 动画的运动⽅式 ( 设置正向或者反向 )
四、变形2D
1、变形的理解
变形属性 transform ：
变形不会影响到⻚⾯的布局(只折腾⾃⼰)
尽量变形写在⼀个transform⾥，不然下⾯再写⼀个，就会覆盖上⾯
可选值：
位移 —translate()
缩放 —scale()
旋转 —rotate()
倾斜 —skew()
2、位移 transform:translate();
translate( 参数1，参数2 ) 参数 值 1 是指在 x 轴上移动的距离 , 正值，元素向右移动，负值向左移 动，参 数2 是指在 y 轴上移动的距离，正值向下，负值向上，参数 2 默认为 0
translateX()沿着x轴⽅向平移
translateY()沿着y轴⽅向平移
translateZ()沿着z轴⽅向平移 结合视距起作⽤. 不能是百分⽐数值（ 3d 变化）
注意：
1、平移元素，可以是数字，可以是百分⽐，百分⽐是相对于 ⾃身计算 的, x 轴往右为正， y 轴往下为正，反之 为负
2 、位移的参考原点是元素的原来所处的位置
3 、如果是通过 active 进⾏位移，执⾏完毕后会还原
4 、 不会影响别的元素
5 、对于⾏内元素是没有效果的
