CSS响应精灵动画

Question

我有以下代码：

http://codepen.io/AlexanderWeb00/pen/GWprqx

我试图让它看起来像一个gif，这样我就可以暂停它。

然而结果并不像预期的那样：它几乎看起来像一个垂直滑块，但它应该只是像gif一样。它需要响应它现在的响应。

当时应该展示一件完整的T恤     身体 {       填充：0;       text-align：center;     }

.parent {
  position: relative;
  width: 70%;
  margin: -10% auto 0 auto; /* positioning tweak */
}

.parent:before {
  content: "";
  display: block;
  padding-top: 60%; 
}

.children {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  background:  url('http://imageshack.com/a/img922/8632/ME6qgO.png') no-repeat 0 0%;
  background-size: 100%;
  animation: sprite 5s steps(5) infinite;
}

@keyframes sprite {
  from { background-position: 0 0%; }
  to { background-position: 0 100%; }
}