CssSpriteAnimator


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

oneLineAnimation

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.

SpriteSheet

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.

function jump(event)
{

    player.className = "jump";
    player.addEventListener( "webkitAnimationEnd", run, false );
    player.addEventListener( "animationend", run, false );
};

function roll(event)
{
    player.className = "roll";
    player.addEventListener( "webkitAnimationEnd", run, false );
    player.addEventListener( "animationend",run, false );
};

function run(event)
{
    player.className = "run";
    player.removeEventListener( "webkitAnimationEnd", run, false );
    player.removeEventListener( "animationend", run, false );
};
#player
{
	position: absolute;
    bottom: 30px;
    left: 30%;
    margin: auto auto;
	width: 125px;
	height: 125px;
	-webkit-transform: translateZ(0);
	background-image: url(http://i.imgur.com/VTyo70d.png);
    z-index: 2;
}

.run
{
	-moz-animation:player_run 0.5s infinite steps(12), linear;
	-webkit-animation:player_run 0.5s infinite steps(12), linear;
}

.jump
{
	-moz-animation:player_jump 0.7s steps(11), linear;
	-webkit-animation:player_jump 0.7s steps(11), linear;
}

.roll
{
	-moz-animation:player_roll 0.5s steps(12), linear;
	-webkit-animation:player_roll 0.5s steps(12), linear;
}

@-moz-keyframes player_run {
	0% { background-position:    0px 0px; }
    100% { background-position: -1500px 0px; }
}

@-webkit-keyframes player_run {
	 0% { background-position:    0px 0px; }
     100% { background-position: -1500px 0px; }
}

@-moz-keyframes player_jump {
	0% { background-position:    0px -250px; }
    100% { background-position: -1375px -250px; }
}

@-webkit-keyframes player_jump {
	 0% { background-position:    -0px -250px; }
     100% { background-position: -1375px -250px; }
}

@-moz-keyframes player_roll {
	0% { background-position:    0px -125px; }
    100% { background-position: -1500px -125px; }
}

@-webkit-keyframes player_roll {
	 0% { background-position:    0px -125px; }
     100% { background-position: -1500px -125px; }
}

 

 

use the CssSpriteAnimator

help_animator

  • 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

help_output

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

<div id="animationWrapper"></div>
#animationWrapper
{
  background-image:url("path/to/your/image");
}

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:

<div id="animationWrapper" class="name of your animation"></div>

To start the animation with javascript:

document.getElementById("animationWrapper").className = "name of your animation animation";

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.

 

conclusion

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.