1. 简介
过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。
transition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的简写属性。
2. 语法
/* 单个属性 */
/* 属性名 | duration */
transition: margin-right 4s;
/* 属性名 | duration | delay */
transition: margin-right 4s 1s;
/* 属性名 | duration | timing function */
transition: margin-right 4s ease-in-out;
/* 属性名 | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* 2 个属性 */
transition: margin-right 4s, color 1s;
/* 2 个属性拆分写法
transition-property: margin-right, color;
transition-duration: 4s, 1s;
/* 应用到所有已改变的属性 */
transition: all 0.5s ease-out;
/* 全局值 */
transition: inherit;
transition: initial;
transition: unset;3. 错误写法
// 错误，不会按预期工作
transition: background-color, width, border-color 2s;
// 等效如下写法
transition-property: background-color, width, border-color;
transition-duration: 0s, 0s, 2s;
transition-timing-function: ease, ease, ease;
transition-delay: 0s, 0s, 0s;
// 正确写法
transition-property: background-color, width, border-color;
transition-duration: 2s;