关于transition的总结
transition就是过渡的意思，作用就是一个动画开头和结尾中间添加一个过渡的效果。
属性值
其中过渡函数，有如下几种：
- liner ：匀速
- ease-in：加速
- ease-out：减速
- ease-in-out：先加速再减速
- cubic-bezier：三次贝塞尔曲线，可以定制
语法
transition: 属性名 时长 过渡方式 延迟
transition: right 4s;
transition: right 4s ease-in-out;
transition: right 4s ease-in-out 1s;
可以用逗号隔开两个不同属性
transition: margin-right 4s, color 1s;
可以用all代表所有属性
transition: all 0.5s ease-out;
局限性
transition的优点在于简单易用，但是它有几个很大的局限。
- transition需要事件触发，所以没法在网页加载时自动发生。
- transition是一次性的，不能重复发生，除非一再触发。
- transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
- 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
注意
- 并不是所有属性都能过渡，
display: block -> none没法过渡 - 一般用
visibility: visible -> hidden或者opacity : 1 -> 0替代
关于animation的总结
animation组成部分
- 关键帧 keyframes
- animation 属性
因为我们可以在任意一个点指定关键帧，所以animation可以用来做更复杂的动画
@keyframes
CSS3的animation制作动画效果主要包括两部分：
1.用关键帧声明一个动画
2.在animation调用关键帧声明的的动画。
@keyframes rainbow {
0% { background: #c00 }
50% { background: orange }
100% { background: yellowgreen }
}
- 如果0%或100%不指定关键帧，将使用该元素默认的属性值
- 如果存在负百分数或高于100%的百分数，则该关键帧将被忽略
- 若存在多个@keyframes，浏览器只识别最后一个@keyframes里面的值
- 空的keyframes规则是有效的，它们会覆盖前面有效的关键帧规则
animation 属性
（1）animation-name：none为默认值，将没有任何动画效果，如果多个动画试图修改相同的属性，那么动画列表的后面覆盖前面
（2）animation-duration：默认值为0，0s意味着动画没有时间，持续时间不能为负值
（3）animation-timing-function：与transition-timing-function一样\
（4）animation-delay：在开始执行动画时需要等待的时间.
如果是负值，请注意动画跳过 2 秒进入动画周期
（5）animation-iteration-count：定义动画的播放次数，默认为1，如果为infinite，则无限次循环播放
（6）animation-direction：默认为nomal，每次循环都是向前播放，（0-100），另一个值为alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放
（7）animation-state：默认为running，播放，paused，暂停
（8）animation-fill-mode：定义动画开始之前和结束之后发生的操作，默认值为none，动画结束时回到动画没开始时的状态；forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；backwards，让动画回到第一帧的状态；both：轮流应用forwards和backwards规则。
语法
animation: name duration timing-function delay iteration-count direction play-state fill-mode
