获得一个流畅的CSS步骤动画结束

Question

我正在使用CSS动画来动画来自PNG文件中内联的许多关键帧的精灵。

@keyframes rotate {
  from {background-position: 0 0;}
  to {background-position: -2560px 0;}
}
.rotate{
      animation: rotate 0.75s steps(20) infinite;
}

我使用JS在用户交互中添加或删除.rotate 动画效果很好，但是当删除.rotate时，精灵会立即回到它的初始状态。
当我删除.rotate时，我想要对精灵进行动画处理，直到它达到初始状态。只有在此刻动画停止。

我读过有关步骤（编号[，开始|结束]），但我不知道它是否可以帮助我。