css animations 主要有两块构成，那么是哪两块呢？
- keyframes : 定义了什么阶段展示什么样的动画
- animation 属性 ：把动画挂载到一个具体的dom上，并且定义如何动起来；
keyframes
keyframes 是动画的基础，它定义了动画在各个阶段的时间线上应该如何呈现。每一个 @keyframes 都应该包括下面：
- 动画的名字， 比如说， @ keyframes bounceIn
- 动画的各个阶段，0% 是最开始的阶段， 100%是最终的阶段，中间可以添加多个中间状态
- css的属性，在动画的各个阶段，css的属性分别是什么样的
下面是一个简单的 @keyframes :
@keyframes bounceIn {0%{transform: scale(0.1);opacity:0;}60%{transform：scale(1.2);opacity:1}100%{transform: scale(1);opacity:1}}
（如果你还对 css 强大的 transform 属性不熟悉的话，可以看我另外关于 transform 总结的教程， 强大的transform 配合 animation 简直就是魔法般的效果）
animation 属性
我们使用 @keyframes 声明好了一个动画， 但是还不够，我们要使用 animation 属性
animation 属性做了两件事情：
- 把动画添加到了你想添加的那个元素
- 定义动画是如何动起来的
所以，下面两个属性必须要添加到 dom 节点上： animation-name , animation-duration;
div {animation-duration:2s;animation-name: bounceIn;}
为了更简洁的语法，我们推荐使用 合写 的写法：
div {animation: bouncIn 2s;}
采用 合写 的写法，所有的动画属性，我们都要挂到 animation 这个属性下面：
animation:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state];
请记住：要让动画正常的动起来，要按照上面的顺序来写，并且前两个属性是一定要有的。
为了构建更复杂的动画，需要再 将要运动的物体上 添加自定义属性：
animation-timing-function
设置缓动：ease( 默认 ) | ease-in | ease-out
animation-delay
动画延迟了多少时间： 0 s( 默认 )
animation-interaction-count
动画要循环多少次：#（默认是1） | infinite | initial
Animation-direction
动画要正着播，倒着播：normal( 默认 ) | reverse | alternate | alternate - reverse ( 后面两个的在animation-interaction-count>1的情况下起作用 )
animation-fill-mode
none(默认) | forwards | backwards | both
animation-play-state
running | pause 暂停后开始，是从之前位置无缝链接；
（animation-play-state : 不可以在animation 中简写，需要单独的加在要运动的动画身上)
你也可以在一个dom元素上增加多个 动画，他们之间只需要用 逗号隔开：
.div {animation: slideIn 2s, rotate 1.75s;}
animation 和 transition 的效果是很像的；
animation 是 定义一个动画，然后挂载到要运动的物体身上；
transition 是把transition 的属性写在要变化的物体身上，然后hover的时候改变样式；
transition可以当成是只有两帧的animation;
transition 和 transfrom 单词长的是很像的；
transfrom 作用是 2d 3d 的转换，
transfrom的主要方法有：
- -webkit-transform : translate ( 10px , 20px ) // 常用在绝对定位的水平居中，垂直居中；
- -webkit-transform : rotate( 12deg )
- -webkit-transform : scale ( 1,3 ) 宽度放大1倍，高度放大3倍
- -webkit-transform : skew（30deg,60deg） 沿x轴旋转的角度，沿y轴旋转的角度
- transform-origin : 变换的基点