Timble Timble - 1 year ago 49
CSS Question

CSS Spritesheet movement transition. Ease without sliding through the background image

It's somewhat hard to explain because it's a mouthful but I'll try to give you the context as best as I can.

I have a little character, facing north, south, east, and west, on a CSS sprite sheet. In my game. you can control his movements with WASD, causing him to visibly move X amount of pixels up, down, left, or right. Depending on that direction, the CSS sprite changes to accommodate accordingly so that he's always "facing" the direction he's travelling.

My problem is that I want to use the CSS transition property, but when I do so, it causes the movement I want however it scrolls through the CSS sprite, which I do not want.

My question is, what CSS property controls the pixel movement on the screen, because setting it to "All" transitions everything, including the background position which I do not want.

I have the following CSS code:

.player {
background: url(character.png) no-repeat top left;
width: 48px;
height: 48px;
position: absolute;
margin: 0;
z-index: 100;
transition: all .25s ease;

.player.playerFront {
background-position: 0 0;

.player.playerBack {
background-position: -48px 0;

.player.playerLeft {
background-position: -96px 0;

.player.playerRight {
background-position: -144px 0;


player.className = 'player playerRight';
player.style.left = parseInt(player.style.left) + 48 + 'px'; // Example of the JS when the player moves right

I've tried a variety of possibilities... none of which have worked. Everything on StackOverflow and online only talk about animation or hover effects and don't apply to my specific problem.

Answer Source

The reason you don't see a smooth transition in movement is that your JS is moving the character in 48px increments. When you set a style like that directly in JS, you won't see it animate because it sets it to the new value immediately - even if you put a transition property on it.

Edit: If you only want to transition the position and not the background-position, you'd do it like this:

transition-property: top, bottom, left, right; 
transition-duration: 0.25s; 
transition-timing-function: ease;

That said, it still won't have an effect if you're using JS to set the style. When you set style.left += 48px, it's going to move that 48px all in one go.

Alternatively, you might have an issue with how your spritesheet is set up. Make sure each "sprite area" (ie, each segment of the sheet that might be visible at once) has the sprite centered in it, not against any of the edges. (It might be helpful to make a codepen showing what you've got, if you want more detailed answers.)