CSS 3 过渡

=====================================================================================

过渡---一个元素在不同状态之间进行平滑的转换，CSS 3 中使用transition属性实现过渡效果。


transition ：过渡属性 执行时间 时间函数 延时时间；



时间函数---设置元素运动的速度

(1)贝塞尔曲线 cubic-bezier(p1(x,y),p2(x,y))

预定义贝塞尔曲线：

ease(默认值)

linear

ease-in

ease-out

ease-in-out

(2) steps()

step-start //步数为一

step-end


=======================================================================================================================================================================================

示例一：

img：hover{transform:translate(600px);}img{transition:2scubic-bezier(0.6,0.1,0.1,0.7);}


示例二：

<style>div:hoverimg{transform:translate(300px);}.i01{transition:2ssteps(3,start);}.i02{transition:2ssteps(3,end);}.i03{transition:2slinear;}</style>

<div><imgsrc="p_w_picpaths/caffe-1.jpg"alt=""class="i01"/><br/><imgsrc="p_w_picpaths/caffe-2.jpg"alt=""class="i02"/><br/><imgsrc="p_w_picpaths/caffe-3.jpg"alt=""class="i03"/></div>


===========transition属性的每一步都可以用单独的属性表示

transition:all2slinear3s;

transition-property:all;transition-duration:2s;transition-timing-function:linear;transition-delay:3s;