What is a Sprite?

A CSS sprite is a performance optimization technique that combines multiple images into a single image called a sprite sheet or tile set. Sprites reduce network congestion by reducing the number of downloads needed to render a web page.

What is a Sprite Animation?

Sprite Animation is when you encase a sprite image into a container and rapidly switch between the images belonging to the sprite in order to represent a moving image.

I used sprite animation on a project called WinUru, where the characters expressed an animation when certain events occurred.

Your sprite:

Sprites are usually large so I like to load them in the background out of site.

I created a container that will house all of my animations with the id "sprite_animation_contain"

I set up my "li"'s with the following data attributes to give my function information it will use when activated.

<li a-name="winny_bow" a-frames="13" a-width="52.9"></li> (a for animation)

Each "li" should have it's sprite inserted by css

This will help the browser load the background images and commit it to memory.

I gave the container properties to remove it from sight.

I create the two containers where the animation will be represented, and gave them the class winny_box and winny_contain, winny_contain being inside of winny_box.

The reason for each container:

Next I give each container it's css properties.


Now comes the script that'll bring your sprite to life

I created a function that can be called on to have these animations take place (I use jQuery in my code).

I named the function sprite_animation and give it 4 parameters.

function sprite_animate(container, sprite, frame_rate, repeat_int) I start the function by creating all my variables

I then I create a condition that will create my frame rate variable.

I created a conditional because I found out that most of my animations used a 33 frame rate, so if the parameter frame_rate is not filled in then it'll take the number 33. But the conditional is not necessary as long as you add it to your function parameters.

Next we add the styles necessary to the container where we add the sprite image and position it where it belongs.

Now we start preparing our animation cycle (this will be the function that will bring the animation to life).

First we name our variables.

Next we create our interval function

We attach the variable "start" to the "setInterval" function. This will give us a way of calling the interval and asking it to stop it's cycle.

Now all you need is a way of calling the function

In this lesson I attached the animations to buttons with "on-click" commands with all the necessary parameters.