Create CSS Animations easily

·

1 min read

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

Creating CSS Animations

Define animation frames as HTML <div> elements with the class frame. Give each frame a unique id of frame[number].

<div id="frame1" class="frame">
  ...
</div>

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

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

Change these JavaScript variables:

let seconds = 0.5; 
let loop = true;
let play = true;  
let numberOfFrames = 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

The frame 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 at CSS Animation Template


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