I organized the game code as an object - everything lives under the rpg object. The game begins once two characters have been chosen by the user. For the interface, I used flexbox to layout the character images, I then listen for a transition on the flex property for each character. The background images are initially set as a jpg, then swapped for the gif version when the user hovers.
To display the character name, I add and animate :before and :after content in the character span.
I downloaded these gifs from Dribble. I opened them in photoshop and laid out all of the frames next to each other. When a game is started, I set these long png images as the background and then animate the background by using a step function assigned to a CSS variable, which you can see here on line 226 of style.css.
The effect is triggered every time the attack button is pressed. Most of the logic for each round of the game is contained in this method. It calls rpg.resetAnimation() every time the button is pressed in order to reset the character animation. Basically, the span is clone, removed and then re-added to the page.
I used the TypeIt library for jQuery to animate the messages that are displayed on screen. I created my own function that wraps around the library code, which made it a little easier for me to read and call in other functions.
For the attack/reset buttons, I borrowed code from this Codepen
Finally, for the pulse effect on the attack button, I borrowed these lines of code from animate.css. I just wanted the pulse effect, so rather than load the entire library I just use this code.
CSS Tricks - A Complete Guide to Flexbox
CSS Tricks - Restart CSS Animation
Treehouse - CSS Sprite Sheet Animations with steps()