让CSS属性值在必定时间内平滑过渡web
检索/设置对象中参与过渡的属性动画
可设置none(不设置过渡)、all(该对象全部属性设置过渡,默认值)、property(具体设置过渡的属性名称)spa
为解决兼容性问题,须要在transition前加上-webkit-、-moz-、-o-等前缀code
设置过渡的时长对象
默认为0,可设置秒(s)或毫秒(ms)blog
设置过渡的类型ci
经常使用值:linear(线性)、ease、ease-in(慢进快出)、ease-out(快进慢出)、ease-in-out(慢到快到慢,推荐使用)it
更复杂的须要调用贝塞尔曲线(相似于CSS动画里的timing-function)io
设置过渡的延时(即过渡以前要停多久再开始过渡)function
默认为0,可设置秒(s)或毫秒(ms)
顺序为property | duration | timing-function | delay,且不可随意调换
其中duration属性为必须
1 div{ 2 width:100px;height:100px; 3 background:#abcdef; 4 opacity:0; 5 transition:opacity 5s ease-in-out; 6 } 7 div:hover{ 8 opacity:1; 9 transition:opacity 5s ease-in-out; 10 }