本文共 940 字，大约阅读时间需要 3 分钟。
transition属性用于设置元素的过渡效果，支持四个简写属性：
通过以下代码示例可以看到transition-property的基本用法：
```html注意：该属性不适用于IE9及更早版本的浏览器。
将鼠标放置在块上，可以看到动画效果。
transition-duration的设置方式示例如下：
```htmltransition-timing-function的可选值及其含义如下：
| 值 | 描述 |
|---|---|
| linear | 以相同速度开始至结束，等同于cubic-bezier(0,0,1,1) |
| ease | 开始时速度较慢，中间加速，结束时速度较慢，等同于cubic-bezier(0.25,0.1,0.25,1) |
| ease-in | 开始时速度较慢，等同于cubic-bezier(0.42,0,1,1) |
| ease-out | 结束时速度较慢，等同于cubic-bezier(0,0,0.58,1) |
| ease-in-out | 开始和结束时速度较慢，等同于cubic-bezier(0.42,0,0.58,1) |
| cubic-bezier(n,n,n,n) | 自定义cubic-bezier函数值，需在0至1之间 |
此外，还可以通过step函数分段执行过渡效果：
step([2, start])表示每个时间段执行一次过渡效果，默认为start时间开始执行
transition-delay的设置示例如下：
```html注意：在transition属性中同时设置多个时间属性时，第一个值为持续时间，第二个值为延迟时间。如果需要设置延迟，请确保在transition属性中明确指定延迟值。
转载地址：http://cbhfk.baihongyu.com/