CSS过渡（transition）是通过定义元素从起点的状态到终点的状态，在一定的时间区间内实现元素平滑过渡或变化的一种补间动画机制。
transition的四个子属性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
即通过transition你可以决定哪个属性（property），何时开始（delay），持续多久（duration）以及如何动画（timing-function）
transition的简写：
例如
- transition: background-color 3s linear 1s;
- transition: width 2s ease-in 2000ms, border 2s linear, height 5s
- transition: 4s ease-in-out
- 以transition-property的值列表长度为标准，如果某个属性值列表长度短于它，则重复值让长度一致
- 如某个属性值列表长于transition-property将被截短。
如何执行动画效果
css3动画一般通过鼠标事件或者鼠标状态定义动画，通常我们可以使用css中伪类、使用js修改元素的样式属性或追加删除样式来执行定义的动画。CSS中伪类执行动画：
| 动态伪类 | 起作用的元素 | 描述 |
|---|---|---|
| :link | 只有链接 | 未访问的链接 |
| :visited | 只有链接 | 访问过的链接 |
| :hover | 所有元素 | 鼠标经过元素 |
| :active | 所有元素 | 鼠标点击元素 |
| :focus | 所有可被选中的元素 | 元素被选中 |
transitionend事件
transitionend事件会在css transition过渡完成时触发。当transition完成前被移除或者取消。比如移除css的transition-property属性，此事件将不被触发。
| Chrome | Firefox (Gecko) | IE | Opera | Safari (Webkit) |
|---|---|---|---|---|
| 1.0开始 webkitTransitionEnd | 4.0开始 transitionend | 10开始 transitionend | 10.5开始 oTransitionEnd 12开始 otransitionend 12.10开始 transitionend | 3.2开始 webkitTransitionEnd |
transition和animation的区别
1. transition完成后会保留过渡后的状态，而animation会跳至默认状态
2. 后者更精细，每一帧都可控。前者是平滑过渡