康廷數位: 動態設定CSS動畫樣式

透過 keyframes 樣式的設定，可以輕易的在網頁上針對某個特定元素實作動畫效果，而經由程式調整動畫樣式，可以在特定的時機點切換不同的動畫效果。

考慮以下的畫面，當滑鼠游標移至矩形框內部區域時，其中的圖片會往上移動，若是滑鼠游標移出矩形框區域，則圖片會往下移動。

現在嘗試實作這個效果，於網頁中配置以下的內容：

<body>

<div id="cimg"

style="margin:0 auto;

text-align:center;

width:280px;height:400px;

border:1px solid silver;">

</div>

</body>

其中的標籤為矩形框，其識別 id 名稱為 cimg ，其中配置了標籤，作為示範圖片來源。現在定義兩個 keyframe 動畫樣式，內容如下：

@-webkit-keyframes slide {

from {margin-top:220px}

to {margin-top:0px}

}

@-webkit-keyframes slide_r {

from {margin-top:0}

to {margin-top:220px}

}

slide 與 slide_r 分別調整 margin-top 屬性來達到改變位置座標的效果。緊接著，設定標籤的樣式如下：

img#cpaint {

margin-top:220px;

-webkit-animation-duration:500ms;

-webkit-animation-direction:alternate;

-webkit-animation-play-state:inherit;

-webkit-animation-fill-mode:forwards;

}

其中設定初始的 margin-top 屬性與其它幾個基礎動畫樣式。另外定義兩個樣式類別，內容如下：

.slide_ani {

-webkit-animation-name:slide ;

}

.slide_ani_r {

-webkit-animation-name:slide_r ;

}

這兩個類別分別套用不同的樣式。最後於網頁載入完成時，註冊矩形框的 mouseover 與 mouseout 事件如下：

window.onload = function () {

var nav = document.getElementById('cimg');

nav.onmouseover = function () {

document.getElementById('cpaint').className = 'slide_ani';

};

nav.onmouseout = function () {

document.getElementById('cpaint').className = 'slide_ani_r';

};

其中於 mouseover 與 mouseout 事件被觸發時，分別針對圖片套用不同的動畫樣式類別。

p.s.

本篇文章以 Chrome 為測試瀏覽器，不討論 IE 系列，Firefox 請將所有樣式屬性名稱字首 -webkit- 調整為 -moz- 。

相關文章

CSS3 動畫效果（1）
CSS3 動畫效果（2）－控制 CSS 動畫
CSS3 動畫效果（3）－動畫屬性設定範例

繼續閱讀…