### **Transition** **定义:**css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。” **语法:** **transition : transition-property || transition-duration || transition-timing-function || transition-delay** transition主要包含四个属性值: 1. 执行变换的属性:transition-property, 2. 变换延续的时间:transition-duration, 3. 在延续时间段,变换的速率变化transition-timing-function, 4. 变换延迟时间transition-delay <br/> <br/> **一、transition-property**:指定当元素其中一个属性改变时,执行transition效果 **语法:** transition-property : none | all | ident **注意:** 1.none(没有属性改变) ,当其值为none时,transition马上停止执行; 2.all(所有属性改变),这个页是其默认值,当指定为all时,则元素产生任何属性值变化时都将执行transition效果 3.ident是可以指定元素的某一个属性值。 网址:[css属性可以实现transition效果列表](https://www.w3.org/TR/css3-transitions/#properties-from-css-) <br/> <br/> **二、transition-duration**:指过渡效果花费的时间。 取值:<time>为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素,包括:before和:after伪元素。其默认值是0,也就是变换时是即时的 <br/> <br/> **三、transition-timing-function**值元素的过渡的效果,有6个属性值: 1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). 2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). 3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). 4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0). 5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。 <br/> <br/> **四、transition-delay**:指过渡效果何时开始。取值:秒(毫秒)或0,默认是 0也就是变换立即执行,没有延迟。 综合上述我们可以给transition一个速记法:transition: <property> <duration> <animation type> <delay>如下图所示: ![](https://box.kancloud.cn/f3ec222ec4946daaf1f77312a30af0bf_529x190.png) 兼容行写法: ~~~ //Mozilla内核 -moz-transition : //Webkit内核 -webkit-transition : //Opera -o-transition : //w3c标准写法 transition : ~~~