CSS background image shows only sometimes? On and off - html

Question

I have a Pokemon demo, which I finished. Then a friend told me he couldn't see the character, and another also.
Now I have tested on multiple browsers and different OSes and can confirm it appears sometimes and not others. Even reloading the page and removing/adding css properties (just ticking them on/off in dev tools) can cause it to appear.
http://codepen.io/mildrenben/pen/EPGBNb?editors=0110
.player {
position: absolute;
width: 16px;
height: 16px;
margin: 32px 32px;
transition: margin 0.35s linear;
background-image: url("http://i.imgur.com/NstnP8t.png");
background-repeat: repeat;
}
.player.down {
background-position: -324px -36px;
}
.player.up {
background-position: -324px -54px;
}
.player.left {
background-position: -306px -144px;
}
.player.right {
background-position: -306px -144px;
transform: scaleX(-1);
}
.player.upAnim {
animation: upAnim 0.35s steps(1) forwards;
}
.player.downAnim {
animation: downAnim 0.35s steps(1) forwards;
}
.player.leftAnim {
animation: leftAnim 0.35s steps(1) forwards;
}
.player.rightAnim {
animation: rightAnim 0.35s steps(1) forwards;
}