HTML5 and Mobile Game Development - Learn HTML5 by Creating Fun Games - page 386

body {
background: url("../img/space-bg-01.jpg")
repeat;
}
Two features that we want in our game, if the device running it supports it, are
transitioned effects of DOM elements as well as animating the background image. In
order to add that functionality only where appropriate (for example, adding this fea-
ture to some mobile devices might slow down the game play to unplayable levels,
given the amount of processing the mobile browser would need to do in order to pro-
duce the CSS animation and transitions), we create the CSS animation and add it to
a custom class. When we determine that the device can handle the animation, we
simply add the class to the document.
/**
* Make the background image continually move
up and to the left,
* giving the illusion that the game world is
scrolling at anangle.
*/
@-webkit-keyframes NebulaBg {
from {
background-position: 0 0;
}
to {
background-position: 1300% 600%;
}
}
/**
* Add the animation to this class, and add a
transition
* to any box-shadow applied to whatever
element this class isattached to.
*/
.animBody {
-webkit-transition: box-shadow 8s;