1. transition
一定时间之内，一组css属性变换到另一组属性的动画展示过程。
属性：
transition-property：动画展示哪些属性，可以使用all关键字；
transition--duration：动画过程有多久；
transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out，贝塞尔曲线等：控制动画速度变化；
transition-delay：动画是否延迟执行；
一般来说，将transition属性应用到最初的样式里，而不是放在结束的样式里，
即定义动画开始之前的元素外观的样式。
只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式，再返回最初样式的变化过程。
1. 需要一个事件来触发，比如hover，所以没法在网页加载时自动触发。
2. 是一次性的，不能重复发生，除非一再触发。
3. 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
4. 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
（引用阮一峰大神博客里的简介）
为了突破这些限制，animation出现了。
2. animation
与transition不同的是，animation可以通过keyframes显式控制当前帧的属性值，
而transition只能隐式来进行（不能指定每帧的属性值），所以相对而言animation的功能更加灵活。
属性：
animation-name：keyframes中定义的动画名称；
animation-duration：动画执行一次持续的时长；
animation-timing-function：动画速率变化函数；
animation-delay：动画延迟执行的时间；
animation-iteration-count：动画执行的次数，可以是数字，或者关键字（infinate）;
animation-direction：alternate(奇数次超前运行，偶数次后退运行)。
animation-fill-mode：告诉浏览器将元素的格式保持为动画结束时候的样子。