CSS背景图片有时只显示？开和关

Question

我有一个口袋妖怪演示，我完成了。然后一位朋友告诉我他看不到这个角色，另一个也看不到。

现在我已经在多个浏览器和不同的操作系统上进行了测试，并且可以确认它有时会出现而不是其他浏即使重新加载页面并删除/添加css属性（只需在开发工具中打开/关闭它们）也可能导致它出现。

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;
}