Download                  Visit page

The CssSpriteAnimator is small little tool which helps you create css animation based on sprite-sheets. It provides all the necessary codes that you can use in your Css files to get a smooth animation. Download the full code for free or visit the CssSpriteAnimator page.


sprite animation


Sprite animations are used in almost every 2d game but it is possible to animate everything with this practice. You need a single image file with several “sprites” on it. Changing the sprites position with 30 fps gives the illusion of a moving object.

With several different sprite animations on a single sprite sheet you can create multiple movement animations easily.


In this case we just change the class to jump or roll by clicking the left or the right side. We also add a animation-end event to the sprite to get back to the run animation if the roll or jump animation is executed. Remove the animation-end event while we start with the run animation.



use the CssSpriteAnimator


  • name: enter the name of the animation. Every animation need a unique name
  • number of frames: total number of all the frames involved in the animation
  • number of lines: total amount of lines if the frames on several lines
  • start position: a negative value defines the position of the first frame on a sprite sheet
  • output size: the size of a single frame. Only equal sizes over all frames is supported
  • time: set the duration of the animation


Copy and paste the output to your css file. You need to have a <div> with the sprite sheet set as background.

Now you can add the the class “name of your animation” directly to the <div> or you assign it with javascript.

To start the animation direct:

To start the animation with javascript:

The name of the main <div> is not effected by the CssSpriteAnimator so you can name it whatever you want. The class name is equal to the animation name.



This is a fast way to create css animation for logo animations or html based games. Css animations are hardware accelerated, smooth and fast. They even work well on mobile devices.