如何使用JavaScript/CSS動畫DOM元素

我正在使用一些戰略視覺疊加的國際象棋遊戲。其中之一需要一些片段和正方形的光動畫，特別是緩慢而穩定的脈衝。我的董事會是一個每個單一的廣場。通過將CSS中的背景圖像設置爲其包含的片段的.svg來顯示片斷。如何使用JavaScript/CSS動畫DOM元素

這可以在CSS中完成嗎？我使用最新的瀏覽器，不支持遺產，所以我可以使用所有漂亮的CSS3東西。我想的另一個選擇是將板的背景圖像設置爲動畫的動畫.gif。這會工作嗎？

有沒有其他方法可以做到這一點我還沒有提到？我想避免包/框架，但我使用jQuery。

澄清：

我想要做的棋子那種脈衝（閃光？）代替慢慢地強調。我希望它是一個緩慢，微妙和一致的脈衝，一直持續到另一個事件關閉。

來源

2013-05-03 Captain Stack

[jQuery UI的效果]（http://jqueryui.com/effect/）？ – Jon 2013-05-03 21:10:22

研究CSS3動畫（谷歌「mdn關鍵幀」）。他們非常強大。 – 2013-05-03 21:10:33

我認爲這對CSS3來說絕對是可能的，你可以對動畫更具體一些。 – aaronman 2013-05-03 21:11:57

這聽起來像你正在尋找CSS動畫。

到這裏看看：http://www.w3.org/TR/css3-animations

特別是你需要以下定時功能：

animation-name，指定關鍵幀集合使用的。
animation-duration，指定動畫的速度。
animation-iteration-count，重複動畫。
animation-direction，以交替動畫的方向。

而且您需要創建一些關鍵幀，通過這些關鍵幀可以指定動畫修改哪些CSS屬性。

此外，您需要在所有內容上都使用供應商前綴，因此您需要編寫-webkit-animation-name而不是animation-name（例如），併爲-moz和其他供應商重複所有操作。

下面是創建脈動不透明效果的webkit示例。你可以在from和to區段屬性實驗，以動畫的尺寸，顏色等

.chess-piece { 
    -webkit-animation-duration: 1s; 
    -webkit-animation-name: pulse; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: alternate; 
} 
@-webkit-keyframes pulse { 
    from { 
     opacity: 0.5; 
    } 
    to { 
     opacity: 1; 
    } 
}

JSFiddle example for webkit and moz

來源

2013-05-03 22:05:01

這看起來正是我所需要的。感謝您的詳細介紹！ – 2013-05-04 19:19:45

這是非常可能和容易做到的。據我瞭解，你想製作一些活躍的國際象棋棋子的發光動畫？下面是我將如何去實現一個解決方案：創建2個PNG，其中一個與它的平凡的普通狀態下的棋形和一個完全照明狀態。然後使用jQuery將發光狀態的不透明度從0改爲100，然後再返回到0。您可以發送jQuery「動畫完成」信號來實現此目的。您可以使用某種簡化的observer pattern在事件發生後取消效果。

來源

2013-05-03 21:25:56

如何使用JavaScript/CSS動畫DOM元素

回答

相關問題