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

-webkit-animation: NebulaBg;
-webkit-animation-duration: 500s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
Finally, in order to simplify some of the game user interface, we create some of the
game elements as ordinary DOM elements, as opposed to rendering equivalent ele-
ments directly in the canvas where the rest of the game is rendered.
The only game element we're building as a DOM element is the energy bar for the
player's ship, which indicates how much energy the ship has left. This energy bar is
composed of a container element containing a div element inside of it. The width of
this nested div represents the amount of energy the player has left, which can be a
value between 0-100%.
.energyBar {
position: absolute;
top: 2%;
left: 4%;
z-index: 99999;
width: 92%;
height: 25px;
border: 1px solid #ff5;
background: #c00;
overflow: hidden;
}
.energyBar div {
background: #ff5;
height: 100%;
width: 100%;
-webkit-transition: width 0.2s;
}