定义式
@keyframes 动画名称{
from{ }
to{ }
}
调用式
动画类似函数，只定义不调用是没效果的，所以要配合调用式使用。
animation: 动画名称 动画时间 延时 时间曲线 播放次数 交替播放 ;
animation: donghua 1s 1s infinite alternate linear;
animation-name: donghua; /*动画名称*/
animation-duration: 1s; /*动画时间*/
animation-timing-function: linear; /*时间曲线*/
animation-delay: 1s; /*动画延时*/
animation-iteration-count: infinite;/*播放次数*/
animation-direction: alternate; /*交替播放*/
显示最终状态
animation-fill-mode: forwards ;
PS：动画播放完毕，默认是回到最初的状态。（如果需要改变，设置 forwards ）
动画暂停
animation-play-state: paused;
注意：动画暂停，不要写到animation复合属性里，因为复合写法有一定的兼容问题。
多个中间状态的动画
@keyframes run{
0%{ } 等价于from
50%{ } 中间可以写入多个百分比状态 (帧动画)
100%{ } 等价于to
}
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
过渡
transition：过渡属性 过渡时间 时间曲线 过渡延时。
注意：它是一个复合属性。可通过Chrome查看。
all 关键词 代表全部，较为常用。
transition 简写属性，用于在一个属性中设置四个过渡属性。 用回调函数，每一次动画过渡完都让他停止 transform：none;
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。通过linear在F12下改变贝塞尔曲线
transition-delay 规定过渡效果何时开始。默认是 0。 要单独写不能组合写，还有要在transition后面跟着，不要在前面单独写，（在前面有transition的前提下，因为这样会被覆盖不会执行他）
2维（2D）转换（转换后结合过渡更为自然）
核心属性：transform；
核心值
位移： translate(x,y)
旋转： rotate(角度) 角度的单位是deg，默认是顺时针方向。
缩放： scale(缩放比例) 一般填入一个值即可，写2个值分别代表水平方向和垂直方向
斜切： skew(角度)
旋转中心点
transform-origin: x y ;
取值：
固定值 如：100px 100px
百分比 如：100% 100%
方向值 top bottom left right center
3维（3D）转换
核心属性还是 transform，3维只是比2维多了1维。
3维转换还是旋转，缩放，位移，只不过在后面多加了一个坐标系控制对应轴向（Z轴）。
如 ：rotateX() rotateY() translateZ()
它还有另一种写法：
translate3d(x,y,z)
scale3d(x,y,z)
rotate3d(x,y,z,角度)
注意：3维里没有斜切。
经验：如果转换模块写成3维的形式，在手机端它开启硬件（GPU）加速，动画的性能有所提升。
背部不可见
backface-visibility:hidden;(结合百度钱包)刚开始就把他的
透视
perspective: 像素 ;
透视属性是模拟人眼看物体近大远小的特征。
添加透视属性的时候，注意不要添加给物体本身，一般我们会添加给父级。
