Card Battle! - HTML5 Game Development - page 65

animation-duration: 1000ms;
}
.blaze.toward-left {background-image:url(images/blaze-
left.png);}
.blaze.toward-right {background-image:url(images/blaze-
right.png);}
@keyframes blaze-toward-left {
0%,20%{ opacity: 1; transform: translate3d(300px, 0,
0);}
80% { transform: translate3d(100px, 0, 0); }
100%{ opacity: 0; transform: translate3d(100px, 0, 0);
}
}
@keyframes blaze-toward-right {
0%,20%{ opacity: 1; transform: translate3d(130px, 0,
0);}
80% { transform: translate3d(330px, 0, 0); }
100%{ opacity: 0; transform: translate3d(330px, 0, 0);
}
}
.blaze.toward-left.attack { animation-name: blaze-toward-
left; }
.blaze.toward-right.attack {animation-name: blaze-toward-
right;}
4. Before we have our batle animaion sequence, we deine two prototype methods
to the Node element object. They are used to keep track of the transiion and
animaion compleion. Add the following code to the patch.js file:
Node.prototype.onAnimationEnd = function(callback) {
var listener = function(e){
e.target.removeEventListener('webkitAnimationEnd',
listener);
callback(e);
}
this.addEventListener('webkitAnimationEnd', listener);
}
Node.prototype.onTransitionEnd = function(callback) {
var listener = function(e){
e.target.removeEventListener('webkitTransitionEnd',
listener);
callback(e);
}
this.addEventListener('webkitTransitionEnd', listener);
}