Building the battle animation

This is a major task that defines the entire battle animation. After both the player's card and opponent's card are on stage, the player's card emits a flame blaze towards the opponent and then the opponent emits another blaze towards the player. The following screenshot shows the blaze being emitted from the player's card on right-hand side towards the opponent's card:

Prepare for lift off

First, we need two more game objects—the blaze towards the left and the blaze towards the right. Add them to the HTML before the end of the game-scene element, as shown in the following code:

<div class="blaze toward-left"></div>
<div class="blaze toward-right"></div>

We need the following two images for these two newly added game objects:

Engage thrusters

Let's create the battle animation sequence with the following steps:

1. Here, we prepare a CSS animation, keyframes, to shake the card. Add the following...