CSS过渡效果（transition）
前言
从效果上来看，过渡效果有点像css动画的简化版，即默认两个关键帧（初始和结束），有点像指定了@keyframes里面的from和to，其它的过渡属性跟动画属性的效果大都一致。这种效果实际上就是两个关键帧之间的补间动画。
transition属性
transition属性实际上是多个过渡属性的缩写，每个过渡属性负责一个特性，组合起来就能实现想要的过渡效果；
transition-property：指定过渡的css属性；除了可以进行过渡效果的css属性名之外，还有两个关键字：all和none；all就是所有可以进行过渡效果的css属性都会开启过渡效果，none就是没有任何过渡效果。transition-duration：指定过渡效果的周期；单位为s或ms，整数部分为0时可以不写，如：0.5s可以写成.5s。transition-timing-function：过渡效果的缓动函数（easing function）；所谓的缓动函数就是使得当前值平滑地过渡到目标值的一类插值函数。transition-delay：过渡效果的延迟时间；即触发过渡后等待的时间。
过渡属性的简写有很多种组合，不过最常见的就是：
1 | transition: property duration (timing-function) (delay); |
除此之外，过渡属性可以一次定义多个过渡效果，用,隔开即可。
可以开启过渡效果的css属性
详细的所有可过渡/可动画的css属性可以参考MDN的整理：
CSS animated properties - CSS（层叠样式表） | MDN
关于缓动函数（timing-function）
简单来说，缓动函数的横坐标t范围为[0, 1]，对应一个动画周期；而纵坐标y范围为[初始值, 目标值]，当前有时候为了表现一些“激烈”的动画效果，y的值可能会超出这个范围；事实上，css里面的内置缓动函数大多是三次贝塞尔曲线得到的。
Timing functions determine how intermediate values of the transition are calculated. Most timing functions can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier.
—— Using CSS transitions - CSS: Cascading Style Sheets | MDN
css中有一些内置的缓动函数：
linear：顾名思义，这个就是单纯的线性函数，一条直线；等同于cubic-bezier(0.0, 0.0, 1.0, 1.0)。
ease-in：ease意为缓慢，in可以理解为“开始”；所以ease-in实际上可以理解为“开始比较缓慢”的函数，缓慢也就是斜率（变化率）比较低。等同于cubic-bezier(0.42, 0.0, 1.0, 1.0)。
ease-out：同理，out可以理解为“结束”；ease-out函数也就是“结束比较缓慢”的效果；等同于cubic-bezier(0.0, 0.0, 0.58, 1.0)。
ease-in-out：同理，开始和结束两端都比较缓慢；等同于cubic-bezier(0.42, 0.0, 0.58, 1.0)。
ease：从谷歌浏览器的缓动函数工具来看，这个函数具有“开始一小段变化较快，其后渐入缓慢”的特点；等同于cubic-bezier(0.25, 0.1, 0.25, 1.0)。
注：以上缓动函数的图片均来自MDN；
除了这些内置的缓动函数，timing-function还有一些强大的函数用来生成缓动函数；
cubic-bezier(x1, y1, x2, y2)：顾名思义，这是一个三次贝塞尔曲线函数；起点为(0, 0)，终点为(1, 1)；而(x1, y1)和(x2, y2)分别是两个控制点，x取值范围为[0, 1]，y的取值范围可以超出[0, 1]，主要是用来模拟一些抖动效果；
谷歌浏览器自带贝塞尔曲线绘制工具，只需要在timing-function那里点击小图标就会弹出，然后拖拽两个控制点就ok了。
steps(n[, direction])：生成阶梯式变化的缓动函数；n为步数，direction为阶梯跳跃的方式，有以下选项：jump-start：等同于start；在t = 0处发生一次跳跃。jump-end：等同于end；在t = 1处发生一次跳跃。jump-both：同理，在t = 0和t = 1处都发生跳跃。jump-none：默认值；在t = 0和t = 1处都不发生跳跃，即均分间距。
（上图源自MDN的示例）
step-start(n)：等同于steps(n, jump-start)。step-end(n)：等同于steps(n, jump-end)。
最后，https://easings.net/ 这个网站收录了很多常用的缓动函数，值得参考。
transition相关事件
事实上，DOM里面也配套了一些过渡专用的事件用来监听DOM元素的过渡状态：
transitionrun：过渡效果被激活时触发，当有过渡延迟（transition-delay）时，会先于延迟结束触发；transitionstart：过渡效果开始时触发，当有延迟时，延迟结束后才会触发；即是指缓动函数开始时触发。transitionend：过渡效果结束时触发；
注：以上事件需要注意浏览器的兼容性！关于transitionstart和transitionrun的触发时机可以查看MDN上面的示例，一目了然。