CSS transition animation的使用（內(nèi)含貝賽爾曲線詳解）(2)

2019-10-16 22:52:43 來源：互聯(lián)網(wǎng)作者：買辣椒也用券 人氣： 次閱讀 604 條評(píng)論

文章主要介紹了css transition animation的使用（內(nèi)含貝賽爾曲線詳解），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，區(qū)別：transition也叫過渡動(dòng)畫...

一、transition （過渡動(dòng)畫） 

屬性 描述 CSS

transition

 簡寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。 3

transition-property

 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。 3

transition-duration

 定義過渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。 3

transition-timing-function

 規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"。 3

transition-delay

 規(guī)定過渡效果何時(shí)開始。默認(rèn)是 0。 3

實(shí)例： 

<!DOCTYPE html>
<html>
<head>
<style> 
div{
    width:100px;
    height:100px;
    background:yellow;
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:cubic-bezier(0,0,1,1);
    transition-delay:0s;
}
div:hover{
    width:500px;
}
</style>
</head>
<body>
<div></div>
<p>請(qǐng)把鼠標(biāo)指針放到黃色的 div 元素上，來查看過渡效果。</p>
<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
<p><b>注釋：</b>這個(gè)過渡效果會(huì)在開始之前等待兩秒。</p>
</body>
</html>

效果如下

transition簡化屬性寫法：
transition: property duration timing-function delay;

默認(rèn)值是transition：all 0 ease 0；

注意事項(xiàng)

在移動(dòng)開發(fā)中直接使用transition動(dòng)畫會(huì)讓頁面變得非?？D（親測），所以我們常用transform:translate3D(0,0,0)或者transform:translateZ(0)來開啟移動(dòng)端動(dòng)畫的gpu加速，使動(dòng)畫過程更流暢。
translate3D(0,0,0)是指電儀3D轉(zhuǎn)換
translateZ(0)是指定義3D轉(zhuǎn)換，只用Z軸

2/4首頁1234尾頁

您可能感興趣的文章

相關(guān)文章