動態設定CSS動畫樣式

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

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


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

<body>
    <div  id="cimg"
        style="margin:0 auto;
                text-align:center;
                width:280px;height:400px;
                border:1px solid silver;">        
        <img id="cpaint" src="images/IMGP0811.JPG" height="180"  />
    </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)- 動畫屬性設定範例



沒有留言: