CSS3 動畫效果(1)


在 HTML5完美風暴這本書裏面,針對 CSS 3 的動畫效果作了討論,對於一些不需要特別程式化控制的動畫效果,使用 CSS 是相當簡便的作法,而這一篇,很快的來看一個簡單的動畫,透過此說明以瞭解 CSS3 的動畫設計寫法。

這個範例於網頁載入之後,便會直接套用預先定義的 CSS 動畫語法,圖片會從左邊開始移動至畫面的中央,最後恢復一開始出現在畫面左邊的狀態。


首先建立此動畫需要的樣式如下:

@-webkit-keyframes slide {
    from {
        margin-left:0%;
    }
    to {
        margin-left:50%;           
    }
}  

第一行的 @-webkit-keyframes 表示要定義一個 keyframes 動畫,以 @ 為字首,接下來則是關鍵字,這是 Chrome 專用的,如果是 Firefox 則需寫成 @-moz-keyframes ,然後 slide 為自訂的動畫識別名稱。接下來的大括弧定義 slide 這組動畫的內容 from 大括弧裏表示動畫開始的狀態, to 大括弧裏則是動畫結束的狀態,這一組動畫表示將物件從距離畫面左邊 0% 的位置,移動至中間位置,你可以使用任何標準的 CSS 樣式作設定。

接下來測試這組動畫定義,首先配置一個圖片, HTML 如下:

<body>
    <img src="girl.jpg" />
</body>

現在為 <img> 套用預先定義的動畫樣式如下:

img
{
    border:1px solid gray ;
    -webkit-animation-name: slide;
    -webkit-animation-duration: 6s;
}

第二行 -webkit-animation-name 表示要套用的動畫名稱 slide ,第三行 -webkit-animation-duration 表示動畫完成的時間區間長度, 6s 表示6秒。

如果要在 Firefox 跑,將 –webkit- 改成 –moz- 即可,同時要讓兩種瀏覽器支援就寫兩組即可。以下為 Chrome 版的完整內容。

<!DOCTYPE html >
<html>
<head>
    <title></title>
    <style>
    @-webkit-keyframes slide {
        from {
            margin-left:0%;
        }
        to {
            margin-left:50%;           
        }
    }       
    img
    {
        border:1px solid gray ;
        -webkit-animation-name: slide;
        -webkit-animation-duration: 6s;
    }
    </style>
</head>
<body>
    <img src="girl.jpg" />
</body>
</html>



沒有留言: