CSS3 onclick動畫

試圖學習CSS3動畫和onclick事件的基礎知識，但我卡住了。CSS3 onclick動畫

我想用button id =「3」開始動畫，紅色方塊如你所見：https://jsfiddle.net/4swmegpn/ 並按鈕id =「4」來停止/重置紅色方塊的動畫。

我只是不知道從哪裏開始。我已經開始添加onclick到：

<button id="button1" onClick=""> > </button>

但之後，我不能想出做什麼。可以調用並激活css文件中的「關鍵幀示例」，但不知道如何去做。

來源

2015-04-26 Michael

「我已經開始添加onclick」和「只有CSS請不要JS或Jquery」。您無法使用'

哦，那我該如何切換動畫呢？ – Michael

如果我使用javascript。我該如何繼續？ – Michael

您可以向元素添加和刪除類以開始/結束動畫。並在CSS中爲該類添加動畫（請參見fiddle）。此外，它是一個很好的做法不包含在HTML任何JavaScript代碼（像的onclick你有），而是在腳本中添加事件偵聽器：

document.getElementById('startAnim').addEventListener('click', function() { 
    document.getElementById('red').classList.add('animate'); 
}); 

document.getElementById('stopAnim').addEventListener('click', function() { 
    document.getElementById('red').classList.remove('animate'); 
});

您還可以使用複選框，懸停狀態或其他選擇切換來自CSS內的動畫。有很多技巧。這完全取決於你需要達到什麼。

來源

2015-04-26 11:48:14 Tigran

感謝您的回答。我在上面的評論中也輸入了它，我嘗試了你的兩個代碼，但是當我點擊時沒有任何反應。我需要Apache來在本地主機上運行JavaScript嗎？ – Michael

不客氣。你不需要輸入任何內容。只需按照小提琴鏈接。我編輯了代碼。如果您想通過HTTP爲您的頁面提供服務，則無論您是否在頁面中使用JavaScript，都需要Apache。您也可以通過「file：//」方案打開html文檔。即只需雙擊文件瀏覽器中的html文件，就應該在默認的Web瀏覽器中打開它。 – Tigran

你能再次幫助我嗎？:) 現在我試圖旋轉藍色方塊，只要你點擊「>」鍵。但我無法讓它移動。我使用與紅色方塊一樣的原理。這裏是小提琴：https：//jsfiddle.net/arkt3huv/ – Michael

以下是一些我們開始談論動畫

你並不需要鍵入doctype，也head，並body標籤，因爲的jsfiddle平臺爲你做它。
這是逃避<和>與<和>，因爲他們可以打破你的HTML代碼很好的做法。
對於CSS3的東西，如動畫，它是使用供應商前綴很好的做法，這是瀏覽器特定的前綴，將使您正在尋找在該瀏覽器的行爲。目前有：
1. 鉻& Safari瀏覽器：-webkit-
2. 火狐：-moz-
3. 歌劇：-O-
4. Internet Explorer中：-ms-

這是一個很好的做法，爲最後留下未加前綴的CSS3代碼，因爲它會覆蓋所有瀏覽器特定的東西。因此，這裏是你的關鍵幀應該是什麼樣子的例子：

@-webkit-keyframes tutsFade { /* your style */ } 
@-moz-keyframes tutsFade { /* your style */ } 
@-ms-keyframes tutsFade { /* your style */ } 
@-o-keyframes tutsFade { /* your style */ } 
@keyframes tutsFade { /* your style */ }

現在的動畫部分 - 我在這裏創造的示例的簡化版本 - https://jsfiddle.net/a1d1Lk6f/ 什麼是新是.exampleAnimation類包含您需要的所有元素，以便使用CSS文件底部定義的動畫example開始動畫。您可以將此類直接添加到HTML元素或控制它形成JavaScript以啓動/停止動畫。

這裏是初學者的一些基本教程：Introduction to CSS Animation,Control CSS3 Animations With jQuery。

來源

2015-04-26 11:59:16

感謝您的回答！現在，我需要apache來查看運行javascript還是？因爲它在Im測試時不起作用。編輯：當我通過Dreamweaver測試代碼時* – Michael

您可以在本地保存頁面並在瀏覽器中運行它，但我認爲您不能在Dreamweaver設計器視圖中運行它。您還可以在瀏覽器的「開發工具」中查看控制檯選項卡是否有任何錯誤。您也可以通過初學者指南瞭解一下stackoverflow，並熟悉它是如何工作的。 –

CSS3 onclick動畫

回答

相關問題