transition、animation我的理解分别是：过渡、动画。因为两者的功能较为接近，所以在这我主要整理transition和animation的使用方法。
Transition
1.定义和用法
transition的使用在于让元素的变化有一个过渡的过程，过渡效果执行完毕之后，默认会还原到原始状态，即可以指定状态变化所需要的时间。transition是一个简写属性，用于设置四个过渡属性：
transition-property：规定设置过渡效果的css属性名称
none 没有属性会获得过渡效果all 所有属性都获得过渡效果property 定义应用过渡效果的css属性名称列表，列表以逗号分隔
transition-duration：规定完成过渡效果需要多少秒或毫秒必须设置，否则时长为0,则不产生过渡效果。
transition-timing-function：规定过渡效果的速度曲线，默认值为：ease
linear 匀速（等于 cubic-bezier(0,0,1,1)）
ease 先加速后减速（等于 cubic-bezier(0.25,0.1,0.25,1)）
ease-in 加速（等于 cubic-bezier(0.42,0,1,1)）
ease-out 减速（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out 等同类似于ease（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay规定过渡效果何时开始，即过渡效果开始前需等待的时间，默认值：0
2.transition的局限性
需要事件触发基本结合滑过、点击、焦点事件使用，无法在网页加载时自动发生（除非结合js）
一次性，不能重复发生，除非一再触发只能定义开始和结束状态，不能定义中间状态，即只有两个状态
Animation
1.定义和用法
animation与transition的效果很类似，但是animation可以很好的避免上述所说的transition的局限性。
animation：是一个简写属性，用于设置以下几个动画属性：
animation- name：为 @keyframes（关键帧） 动画规定一个名称
none 规定无动画效果（可用于覆盖来自级联的动画）keyframename规定需要绑定到选择器的keyframe的名称
animation -duration：规定完成动画所花费的时间必须设置，否则时长为0,则没有动画效果
animation -timing-function：规定动画效果的速度曲线，默认值为：easelinear 匀速（等于 cubic-bezier(0,0,1,1)）
ease 先加速后减速（等于 cubic-bezier(0.25,0.1,0.25,1)）
ease-in 加速（等于 cubic-bezier(0.42,0,1,1)）
ease-out 减速（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out 等同类似于ease（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
animation -delay：规定动画效果何时开始
animation –iteration-count：定义动画的播放次数n 定义动画播放的数值infinite 规定动画应该无限次播放
animation –direction：定义是否轮流反向播放动画normal 默认值。
动画正常播放alternate动画应该轮流反向播放
animation –play-state：（目前支持该属性的浏览器较少）检索或设置对象动画的状态running 默认值。规定动画正在播放paused规定动画已暂停
animation –fill-mode：（目前支持该属性的浏览器较少）检索或设置对象动画时间之外的状态none 默认值。不设置对象动画之外的状态（不改变默认行为）
forwards设置对象状态为动画结束时的状态（在最后一个关键帧中定义）
backwards 设置对象状态为动画开始时的状态（在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。）
both设置对象状态为动画结束或开始的状态（向前和向后填充模式都被应用）