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

2019-10-16 22:52:43 來源：互聯網作者：買辣椒也用券 人氣： 次閱讀 604 條評論

文章主要介紹了css transition animation的使用（內含貝賽爾曲線詳解），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，區別：transition也叫過渡動畫...

一、transition （過渡動畫） 

屬性 描述 CSS

transition

 簡寫屬性，用于在一個屬性中設置四個過渡屬性。 3

transition-property

 規定應用過渡的 CSS 屬性的名稱。 3

transition-duration

 定義過渡效果花費的時間。默認是 0。 3

transition-timing-function

 規定過渡效果的時間曲線。默認是 "ease"。 3

transition-delay

 規定過渡效果何時開始。默認是 0。 3

實例： 

<!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>請把鼠標指針放到黃色的 div 元素上，來查看過渡效果。</p>
<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
<p><b>注釋：</b>這個過渡效果會在開始之前等待兩秒。</p>
</body>
</html>

效果如下

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

默認值是transition：all 0 ease 0；

注意事項

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

2/4首頁1234尾頁

您可能感興趣的文章

相關文章