原标题：CSS3中的元素过渡属性transition解析
小伙伴们都知道过渡动画是动画的基础，在学习动画属性之前，需要先了解过渡属性transition，下面这篇文章通过示例代码给大家详细介绍了CSS3中的元素过渡属性transition，小伙伴们可以参考：
css3的transition允许css3的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
过渡transition：
这样当我的光标悬浮在demo的一瞬间
它的宽度变成了200px
现在我们只需要添加一个属性
就可以达到元素宽度缓慢变宽
transition它的作用就是指定当你的元素某些样式发生变化时
这些样式可以渐渐过渡到最终属性值
有以下子属性
transition-property：指定过渡或动态模拟的css属性
transition-duration：指定过渡所需要的时间
transition-timing-function：指定过渡函数
transition-delay：指定开始出现的延迟时间
transition-property 我们想要哪种属性过渡就写哪种属性
或者干脆写过渡所有属性的关键字all
transition-duration渐变时间属性值就是“数字+s”
代表几秒钟内过渡
transition-timing-function 是可选的属性值，有如下可选值
linear
线性过渡，等价贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease(默认)
平滑过渡，等价贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in
由慢到快，等价贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out
由快到慢，等价贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out
由慢到快再到慢，等价贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start
等同 steps(1, start)
step-end
等同 steps(1, end)
steps()：
两个参数的步进函数。第一个参数为正整数，指定函数步数。第二个参数取值是start或end，指定每一步的值发生变化的时间点。第二个参数可选，默认值为end。
cubic-bezier(num, num, num, num)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
大多我们都用不上，最常用的大概就是我们默认的ease和线性过渡linear了
transition-delay 同样是可选属性值
如果你想要延迟过渡，换句话说如果我们想要在过渡前停一小会儿
那么就在这个复合属性的最后添加我们需要延迟的时间“数字+s”返回搜狐，查看更多
责任编辑：
