CSS动画简介：
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
CSS中的transform与transition:
https://www.cnblogs.com/lay-3377/p/5891036.html
- transition的作用在于，指定状态变化所需要的时间。
transition: 1s;表示持续1秒时间。
transition: 1s height;表示 height的变化需要1秒，其它依然瞬时完成。
transition: 1s height, 1s width;表示 height和 width的变化需要 1秒。
transition: 1s height, 1s 2s width;表示height和 width的变化需要 1秒,但 width延迟2秒执行。 - cubic-bezier 登录该网站来确定：http://cubic-bezier.com/#.17,.67,.83,.67
transition-property: height;
transition-duration: 1s;
transition-delay: 2s;
transition-timing-function: ease;
transition需要事件触发，所以没法在网页加载时自动发生。
transition是一次性的，不能重复发生，除非一再触发。
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
一条transition规则，只能定义一个属性的变化，不能涉及多个属性。 - animation 需要指定动画一个周期持续的时间，以及动画效果的名称。需要用keyframes关键字
注意状态之间 没有逗号， 0%可以用from代表，100%可以用to代表
animation: 1s rainbow;
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
animation: 1s rainbox infinite;默认动画执行一次，使用infinite表示无限次
动画结束以后，会立即从结束状态跳回到起始状态。animation-fill-mode: forwards;表示让动画停留在结束状态
animation-direction: normal|reverse;动画播放的方向，reverse表示从结束状态到开始状态播放 animation: 1s 2s rainbow linear 3 forwards normal;
具体写就是：
animation-name: rainbow;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 2s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
有时，动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态。
如果想让动画保持突然终止时的状态，就要使用animation-play-state属性：
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;}- transform：转换
对元素进行移动 translate(30px,60px), 其中：left（x坐标）、top（y坐标）
缩放 scale(1.5, 0.8); 宽度变为原来的1.5倍，高度变为原来的0.8倍
旋转 rotate(20deg) ,正值顺时针旋转，负值逆时针旋转
翻转 skew(20deg, 20deg); 围绕 X 轴把元素翻转20度，围绕 Y 轴翻转20度