CSS 过渡提供了一种在更改 CSS 属性时控制动画速度的方法

通常将两个状态之间的过渡称为隐式过渡，因为开始与结束之间的状态由浏览器决定。CSS 过渡可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始（设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing function，比如匀速地或先快后慢)。

同时应当留意这种情形，在插入元素（如 .appendChild()）或改变属性 display: none 后立即使用过渡，元素将视为没有开始状态，始终处于结束状态。简单的解决办法，改变属性前用 window.setTimeout() 延迟几毫秒。

CSS 过渡由简写属性 transition 定义是最好的方式，可以避免属性值列表长度不一，节省调试时间。transition 让 JavaScript 效果更平滑

1. transition-property 指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其他属性仍如通常那样瞬间变化。
2. transition-duration 指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。
3. transition-timing-function 指定一个函数，定义属性值怎么变化。缓动函数 Timing functions 定义属性如何计算。多数 timing functions (en-US) 由四点定义一个 bezier 曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。
4. transition-delay 指定延迟，即属性开始变化时与过渡开始发生时之间的时长。

transition: 属性名称<property> 时长<duration> 节奏<timing-function> 延迟<delay>