DEV Community

Cover image for Create CSS Animations easily
Medea
Medea

Posted on

5 1

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!

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay