CSS3 transition 屬性範例、創造動畫效果

CSS3 transition 屬性範例、創造動畫效果

<style type="text/css">
#Change{
    width:60px;
    height:60px;
    background:red;
    transition:width 1s;
    -moz-transition:width 1s;
    -webkit-transition:width 1s;
    -o-transition:width 1s;
}
#Change:hover{
    width:500px;
}
</style>
<div id="Change"></div>

範例輸出結果

動畫效果可說是 CSS3 最為迷人之處，因為網頁設計師可以利用 CSS3 的 transition 屬性，輕鬆寫出一個動畫效果，取代傳統用 Flash 設計的許多動畫，而且具有檔案精簡、傳輸效率高以及修改容易等優點，更不用擔心用戶端沒有安裝 Flash 閱讀軟體。