通過javascript觸發CSS動畫

我想通過CSS動畫觸發javascript，反之亦然（JavaScript來觸發CSS）。通過javascript觸發CSS動畫

最終目標是讓CSS動畫閃爍開啓和關閉，並讓它們觸發通過Web Audio API導入的音頻文件。

現在我只是想讓CSS動畫和Javascript對話。

所以..

我在WebKit瀏覽器exclusivley試驗。下面是一個堆棧溢出線程，似乎回答我的問題的第一部分： How do I re-trigger a WebKit CSS animation via JavaScript?

但我不能得到這個工作。

我已經加入我刮的代碼/修改下面

<!--SETUP--> 
<!DOCTYPE html> 
<meta charset="UTF-8"> 
<title>test</title> 
<link rel="stylesheet" href="test.css"> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" charset="utf-8"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script> 
<!--END setup--> 



<script src="test.js"></script> 
<div id="box"> shake </div> 
<div id="button"> Button </div>

CSS

#button { 
    width:100px; 
    height:100px; 
    background:blue; 
    position:absolute 

} 

#box{ 
width:100px; 
height:100px; 
background:red; 
position:absolute; 
top:100px; 
left:90%; 
margin-left:100px; 
-webkit-animation: shake 1.5s steps(1) ; 
} 



@-webkit-keyframes shake { 
    0% { 
     left: 0; 
    } 
    25% { 
     left: 12px; 
    } 
    50% { 
     left: 0; 
    } 
    75% { 
     left: -12px; 
    } 
    100% { 
     left:0; 
    } 
}

的Javascript

var element = document.getElementById('box'); 

element.addEventListener('webkitAnimationStart', function(){ 
    this.style.webkitAnimationName = ''; // I think css animationName should go here...but not sure. 
}, false); 

document.getElementById('button').onclick = function(){ 
    element.style.webkitAnimationName = 'shake'; 
    // you'll probably want to preventDefault here. 
};

來源

2012-08-07 William

而是改變元素的樣式，添加AC lass名稱，並且有一個CSS聲明，其中包含要在該類中使用的CSS轉換。

來源

2012-08-07 20:51:40

+1這是觸發CSS動畫的最簡單方法。另外，最容易維護。 – jfriend00 2012-08-07 20:57:31

通過javascript觸發CSS動畫

回答

相關問題