### **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>如下图所示：  兼容行写法： ~~~ //Mozilla内核 -moz-transition ： //Webkit内核 -webkit-transition ： //Opera -o-transition ： //w3c标准写法 transition ： ~~~