HTML and CSS Reference
Objective complete - mini debriefing
The animation sequence
1. Here is how we can create the animaion sequence: We enable the animaion state
by adding a specific class to the game elements.
2. We listen to the transitionEnd or animationEnd event.
3. When the event is trigged, we remove the event listener.
4. Inside the event handler, we repeat step 1 for the next game elements.
Please note that we need to remove the event listener after it is triggered;
otherwise, the animation completion event will be triggered several times
when the game repeats the battle animation. Multiple addEventListener
events will trigger the same handlers.
So, we have the following sequence for the batle:
1. Opponent card transits in.
2. Blaze moves from right to left.
3. The opponent card shakes.
4. Blaze moves from left to right.
5. The player card shakes.
The transitionEnd and animationEnd elements also come
with the vendor prefix until they are stable and officially supported
by browsers. That's why we used webkitTransitionEnd and
Using the CSS keyframes animation
Keyframes allows us to deine how the styles change within the animaion duraion.
It is a collecion of keyframes with two things: the percentage of ime and a block of
styles. The ime must start at 0 percent and end at 100 percent.
The keyframes block often generically describes the movement. So, you will not see
informaion about missing elements and duraion. This missing informaion is for the
styles of the selector. That's why we have the duraion and easing funcion deined in
the .card.shake selector.