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>
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…
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!
Top comments (2)
This isn't CSS animation.
yes but you are creating the frames with css, the transition is just js