Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

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:

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

Hide frames after the first by addingstyle="display: none;".

Change these JavaScript variables:

letseconds=0.5;letloop=true;letplay=true;letnumberOfFrames=4;
Enter fullscreen modeExit 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

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
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
shikkaba profile image
Me
  • Joined

This isn't CSS animation.

CollapseExpand
 
vulcanwm profile image
Medea
A 16 year old full-stack developer who codes for fun and loves building projects related to music
  • Location
    England
  • Pronouns
    she/her
  • Joined

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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

A 16 year old full-stack developer who codes for fun and loves building projects related to music
  • Location
    England
  • Pronouns
    she/her
  • Joined

More fromMedea

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp