
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 classframe
. Give each frame a uniqueid
offrame[number]
.
<divid="frame1"class="frame"> ...</div><divid="frame2"class="frame"style="display: none;"> ...</div>
Hide frames after the first by addingstyle="display: none;"
.
Change these JavaScript variables:
letseconds=0.5;letloop=true;letplay=true;letnumberOfFrames=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
Theframe
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 atCSS Animation Template
Thanks for reading this article and let me know if you have any suggestions for the template!
Top comments(2)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse