CSS3中的元素过渡属性transition示例详解

前言

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

过渡transition

先来看一个小例子

这样当我的光标悬浮在demo的一瞬间

它的宽度变成了200px

有没有办法让我们光标悬浮在元素时，元素宽度缓慢变宽呢

在CSS3之前我们只能使用麻烦的js脚本

但是现在我们只需要添加一个属性

就可以达到我们的目的

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)