1、前言
transition 属性设置元素当过渡效果，四个简写属性为：
transition-property 指定CSS属性的name，transition效果
transition-duration 指定过渡效果的持续时间
transition-timing-function 过度的时序函数
transition-delay 过渡效果延迟，等一段时间后再执行
2、transition-property 用法
2、transition-property 用法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>半壁为璜(runoob.com)</title> <style> div { width:100px; height:100px; background:red; transition-property: width; transition-duration: 2s; -webkit-transition-property: width; /* Safari */ -webkit-transition-duration: 2s; /* Safari */ } div:hover { width:300px; } </style> </head> <body> <p><b>注意:</b> 该属性不兼容 IE9以及更早版本的浏览器.</p> <div></div> <p>鼠标移动在块上查看动画效果.</p> </body> </html>
3、transition-duration 用法
3、transition-duration 用法 <style> div { width:100px; height:100px; background:red; transition-property:width; transition-duration:5s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:5s; } div:hover { width:300px; } </style>
4、transition-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 之间的数值。 |
steps()分布执行过渡效果
可设置一个第二个值
end，在时间结束时执行过渡（默认值）
start，在时间开始时执行过渡
transition-timing-function：step(2,start);
5、transition-delay用法
5、transition-delay用法 <style> div { width:100px; height:100px; background:red; transition-property:width; transition-duration:5s; transition-delay:2s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:5s; -webkit-transition-delay:2s; } div:hover { width:300px; } </style>
注意：
transition可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中的第一个是持续时间，第二个是延迟时间
