Vipin Raunchhela

How to create Sprite image Animation Using CSS3

If you ever thought to create animation using Sprite images then here you can learn how to do that. I am sharing a simple CSS3 animation work with you and I’ll try to explain how you can do that.

Animation using Sprite character and give direction to it using arrow keys

Before starting with it, you should have basic knowledge of Jquery, HTML and CSS so that you can create your own animation. This is the image which I used to create an animation. I’ll try to make it as simple as I can, so that you can understand it and create your own animations.

Character Animation

 

Step.1

First create a HTML file

<html>
<head></head>
  <body>
     <div class="box"> </div>
  </body>
</html>

You have to add single div in HTML body nothing else, that’s all we need in HTML file.

Step.2

Write CSS for box div. CSS plays an important role in this because we are going to animate using CSS Only.

.box {
   height: 54px;
   width: 58px;
   position: absolute;
   box-sizing: border-box;
   background: url(character.jpg) -8px 0px;
}

This will create a box which is having a character image in background. Position absolute is used, so that we can move the box with arrow keys using Jquery, that we’ll add later.

To display character facing in right direction, I am creating another class ‘.right‘.

.box.right{
background-position:-3px -121px; // sprite image facing right.
animation: right-direction .8s steps(7) infinite;
//right-direction is a keyframe that we will define using @keyframe
// .8s is a time in miliseconds
// Steps(7) you can consider it as a frame 7 so it will take 0.8s (0.8 seconds) to reach to the 7th frame of the image
}
When you’ll add ‘right‘ class with ‘Box‘ class the character will face toward the right direction. But it won’t move until we define right-direction keyframe.
Let’s define the ‘right-direction‘ keyframe that we used in ‘.box.right‘ class

@keyframes right-direction {
  100% { background-position:-423px -121px; } //this position is of last sprite image horizontally
}
Here you can define 0% to 100% in chunks but in this, we don’t need to do that. So I am defining 100% directly. For more details on keyframes you can visit this link.
After doing this you’ll see your background image character is running but at its own place.

50% work is done for single direction, now we have to do the another part with Jquery.

Step.3

We need to analyse which key is pressed and according to that we need to add dynamic classes to the <div class=”box”></div>

$(document).ready(function(){
  $('body').keydown(function(e) {
 
      if(e.keyCode == 39) { // right key pressed
         $('.box')
              .addClass('right')
              .removeClass('left down up')
              .stop()
              .animate({
                 left: '+=5'
             });
       }
}).keyup(function(){ 
        // On keyup all direction classes are moved and face toward you
     $('.box').removeClass('right down up left');
  });
});
There is a function keydown() which gets invoked when key is pressed. This will help us to analyze which key is pressed.
There are different keycodes for different buttons so 39 is for right direction key.
If(e.keyCode==39){ funtion() }
If this condition is true that means right key is pressed and it will execute the function inside it.
.addClass()- This will add the class to the div
.removeClass()- This will remove the extra classes from same div
stop()- This will stop the animation

The above code is for only one direction, you have to do this for all directions.

You can see the complete working demo at this Codepen Link.

Thank you for reading. 🙂

 

Related Articles

#Tech

NHibernate, Linq and Lazy Collections

For the past few months we have been busy building a services framework for one of our clients so that they can build all of their enterprise web services without ever having to worry about the cross cutting concerns and... Read more
#Tech

Page Redirects using Spring.NET

Who is responsible for page redirects in ASPNET MVP – The View or the Presenter None of the above, it is you :) On a serious note, it is the View as one shouldn’t pollute the Presenter with the page navigation... Read more