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:
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!