CSS 3 过渡-transition_html/css_WEB-ITnose

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:2s cubic-bezier(0.6,0.1,0.1,0.7);}

示例二：  

<style>        div:hover img{            transform:translate(300px);        }        .i01{            transition:2s steps(3,start);        }        .i02{            transition:2s steps(3,end);        }        .i03{            transition:2s linear;        }    </style>

    <div>        <img class="i01 lazy"  src="/static/imghwm/default1.png"  data-src="images/caffe-1.jpg"   alt="" /><br/>        <img class="i02 lazy"  src="/static/imghwm/default1.png"  data-src="images/caffe-2.jpg"   alt="" /><br/>        <img class="i03 lazy"  src="/static/imghwm/default1.png"  data-src="images/caffe-3.jpg"   alt="" />    </div>

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

 

    transition: all 2s linear 3s;

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