1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线
linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction
normal 默认动画结束不返回
Alternate 动画结束后返回
8、animation-play-state 动画状态
paused 停止
running 运动
9、animation-fill-mode 动画前后的状态
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
10、animation:name duration timing-function delay iteration-count direction同时设置多个属性
举例 等待条：
效果：
css3 2D变形
1、位移：transform：translateX x轴位移
transform：translateY y轴位移
同时写会被覆盖，所以用复合属性写
复合属性：transform：translate（100px，100px）第一个是x轴参数 第二个是y轴参数
起始点：00点，边框的左上角的顶点
transform：translate（100px 0，） x轴距离左边100px
transform：translate（ 0，100px） y轴距离左边100px
2、缩放：transform：scale（2）里面的数字表示倍的意思
transform：scale（1）表示本身，不变
transform：scale（0.5）小于1表示缩小
transform：scale（0）表示缩小到消失
3、倾斜：transform：skew（ax，ay）表示x轴倾斜角度，y轴倾斜角度 单位是度数值deg
transform：skew（60deg，20deg）
x轴会改变宽度，y轴会改变高度
第一个表示x轴，按照逆时针方向进行旋转，宽度变化，高度不变
第二个表示y轴，按照顺时针方向进行旋转，高度变化，宽度不变
4、旋转：rotate（）单位也是deg
只设置一个值表示沿中心点旋转
rotatex 沿x轴转
rotatey沿y轴转
transition: all 2s linear .5s/加在div上
过渡属性
过渡动画函数（( transition-timing-function )
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
linear
规定以相同速度开始至结束的过渡效果
ease
规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值)
ease-in
规定以慢速开始的过渡效果
ease-out
规定以慢速结束的过渡效果
ease-in-out
规定以慢速开始和结束的过渡效果
