I've recently created a template to easily create animations with CSS.
Go to this GitHub repository to use the template:

<divid="frame1"class="frame">  ...</div><divid="frame2"class="frame"style="display: none;">  ...</div>

letseconds=0.5;letloop=true;letplay=true;letnumberOfFrames=4;

Creating CSS Animations

Define animation frames as HTML<div> elements with the classframe. Give each frame a uniqueid offrame[number].

<divid="frame1"class="frame">  ...</div><divid="frame2"class="frame"style="display: none;">  ...</div>

Hide frames after the first by addingstyle="display: none;".

Change these JavaScript variables:

letseconds=0.5;letloop=true;letplay=true;letnumberOfFrames=4;

• seconds: How long (in seconds) each frame displays. Default:0.5
• loop: If the animation should loop. Default:true
• play: If the animation starts automatically. Default:true
• numberOfFrames: The number of frames

Theframe class styles the frame size and border.

The template contains:

• a slider to change the frame of the animation
• a checkbox to toggle or untoggle loop (loop)
• an input to change the display time of each frame (seconds)

You can view a demo of this CSS Animation template atCSS Animation Template

Thanks for reading this article and let me know if you have any suggestions for the template!