CSS 3 過渡-transition

CSS 3 過渡

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

過渡---一個(gè)元素在不同狀態(tài)之間進(jìn)行平滑的轉(zhuǎn)換，CSS 3 中使用transition屬性實(shí)現(xiàn)過渡效果。

transition ：過渡屬性  執(zhí)行時(shí)間  時(shí)間函數(shù) 延時(shí)時(shí)間；

時(shí)間函數(shù)---設(shè)置元素運(yùn)動(dòng)的速度

(1)貝塞爾曲線  cubic-bezier(p1(x,y),p2(x,y))

預(yù)定義貝塞爾曲線：

ease(默認(rèn)值)

linear

ease-in

ease-out

ease-in-out

(2) steps()

step-start  //步數(shù)為一

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 src="p_w_picpaths/caffe-1.jpg" alt="" class="i01"/><br/>
        <img src="p_w_picpaths/caffe-2.jpg" alt="" class="i02"/><br/>
        <img src="p_w_picpaths/caffe-3.jpg" alt="" class="i03"/>
    </div>

===========transition屬性的每一步都可以用單獨(dú)的屬性表示

    transition: all 2s linear 3s;

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