CSS3过渡中止导致丑陋的动画

我正在使用CSS3步骤转换来将精灵从一个状态设置为另一个状态.

当我开始一个动画它显示了一个帧的时间和有一个很好的过渡效果(在点击"显示/隐藏"链接例子).但当而第一个仍在运行框架获取位置的丢失,它看起来像它滚动到另一侧,而不是保持帧一帧的动画被触发第二过渡(单击"触发器虫" 例子).

.tree {
    width: 26px; /* one frame */
    height: 31px; /* frame height */
    background-image: url("http://rolandschuetz.at/docs/tree-animated.png");
    background-repeat: no-repeat;
    background-position: -234px 0; /* last frame */
    transition: background-position .8s steps(10); /* this triggers the CSS3 step transition */
}
.tree-hidden {
    background-position: 26px 0; /* clear, before first frame */
}

有没有办法强制动画即使在中止旧动画时也能正常工作？

PS:请不要尝试通过触发错误按钮,这是只有在那里进行演示"修复".真正的问题是由快速的用户交互触发的,应该立即反馈.