I want to trigger javascript via CSS animations and vice versa (Javascript to trigger CSS).
The end goal is to have CSS animations flicker on and off and have them trigger audio files that are imported via the Web Audio API.
Right now I am simply interested in making CSS animations and Javascript talk to one another.
so..
I am experimenting exclusivley in Webkit browsers. Below is a stack overflow thread that seems to answer the first part of my problem: How do I re-trigger a WebKit CSS animation via JavaScript?
But I can't get this to work.
I have added the code I scraped/modified below
<!--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.
};
