DEV Community

Cover image for Create CSS Animations easily
Medea
Medea

Posted on

Create CSS Animations easily

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

Create CSS Animations with this Template

This HTML, CSS, and JS template makes it easy to create 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>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode
  • 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…

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>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode
  • 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!

Top comments (2)

Collapse
 
shikkaba profile image
Me

This isn't CSS animation.

Collapse
 
vulcanwm profile image
Medea

yes but you are creating the frames with css, the transition is just js