DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 10.2 過渡屬性transition-property
10.2 過渡屬性transition-property
編輯:CSS3基礎     

一、transition-property屬性

在CSS3中,我們可以使用transition屬性來將元素的某一個屬性從“一個屬性值”在指定的時間內平滑地過渡到“另外一個屬性值”來實現過渡效果。

其中,我們可以使用transition-property屬性來單獨設定過渡動畫所要操作的那個屬性。

語法:

transition-property:取值;

說明:

transition-property屬性的取值是一個“CSS屬性名”。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 transition-property屬性</title>
    <style type="text/css">
        div
        {
            display:inline-block;
            width:100px;
            height:50px;
            background-color:#14C7F3;
            transition-property:height;
            transition-duration:0.5s ;
            transition-timing-function:linear;
            transition-delay:0;
        }
        div:hover
        {
            height:100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

這裡使用transition-property屬性指定了過渡動畫所操作的CSS屬性是height。當鼠標移動到div元素上時,元素的高度會在0.5s內從50px過渡到100px。

對於CSS3過渡動畫,大多數情況下都是配合:hover偽類 來使用。

此處為了更清晰地表達,省略了兼容代碼的書寫,請大家在實際開發中別忘了寫兼容性代碼。這一章建議使用chrome浏覽器(-webkit-前綴)來學習。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved