Card Battle! - HTML5 Game Development - page 64

We need the following two images for these two newly added game objects:
Engage thrusters
Let's create the batle animaion sequence with the following steps:
1. Here, we prepare a CSS animaion, keyframes , to shake the card. Add the following
code before the card styling deiniion in the game.css file:
@keyframes shake {
0% { transform: translate3d(0, 0, 0); }
20% { transform: translate3d(-5%, 0, 0);}
40% { transform: translate3d(5%, 0, 0); }
60% { transform: translate3d(-5%, 0, 0);}
80% { transform: translate3d(5%, 0, 0); }
100% { transform: translate3d(0, 0, 0); }
}
2. Then, we make use of the animaion by deining a new shake state for the
card elements:
.card.shake {animation: shake 300ms ease-out;}
3. Next, we have styles for our newly created blaze elements. Append the following
styling and animaion to the end of the game.css file:
.blaze {
position: absolute;
bottom: 300px;
width: 50px;
height: 50px;
opacity: 0;
animation-timing-function: ease-out;