Am developing a game using HTML5 and CSS3.
I have a bunch of divs that have CSS3 animations attached to them on hover events. The game is a basic match the tiles/cars game. This is -webkit- only so runs best in Chrome.
Here is a preview : http://tinyurl.com/3ry2bgn
I want to attach game logic but am stumped on what approach to take.
Can I just attach additional ids to the DIVs and use JavaScript to just check that?
How can I make the animations animated onClick events? Or better on tap events for the iPad?
Thanks!
To control CSS3 animations via Javascript, the best thing to do generally is to place the animation style in a class, and then add that class in the onClick event handler.
You can use animation events to detected the end of the animation and remove the class, so that the animation relaunches on subsequent events, or you could just check in each onClick event if the class has already been added, and then if it has, remove it before reading it.
Although you are using a Webkit-based browser, the Mozilla Developer Reference CSS Animations Page is still an excellent reference — just replace the -moz- vendor prefix with -webkit- 😉