HTML and CSS Reference
In-Depth Information
The card shaking animation
The shaking animaion is done by having the card's x-axis move from -5 percent to 5 percent
several imes.
The blaze animation
The blaze is an animaion that moves from one side to the other along the x-axis. At the
same ime, it fades out during the last 20 percent of ime.
We can create a pause between the animaions by seing the same value in two adjacent
keyframes. The blaze atacking animaion sets a 20 percent pause at the beginning by adding
the following code:
0%,20%{ opacity: 1; transform: translate3d(300px, 0, 0);}
Classified intel
If we want to add a pause at the beginning, we can also use the animation-delay
property. But the delay is not the same. The delay property adds the delay duraion
to the total duraion using the following formula:
The duraion user sees = delay duraion + animaion duraion
Using the keyframes pause makes the total duraion follow the animation-duration
property.
Adding health points to the game
In this task, we are going to add health points to both the player and the opponent.
We reduce the health points during the batle if any side gets hurt.
Prepare for lift off
First, we define the user interface of the health points in HTML. Put the following code in
the index.html file, right after opening the #game-scene tag. We also create a batle
indicator:
<div class="hp-background">
<div class="hp opponent"></div>
<div class="hp player"></div>
</div>
 
Search WWH ::




Custom Search