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

Question

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

Answer 1

更新了代码

检查这是否对您有帮助。

超文本标记语言

<div class="outer"> <!--Added this div-->
  <div class="tree"></div>        
</div>

CSS：

.outer {
    width: 26px;
    border: 1px solid grey;
}
.tree {
    width: 26px; /* one frame */
    height: 31px;

    background-image: url("http://rolandschuetz.at/docs/tree-animated.png");
    background-repeat: no-repeat;
    background-position: -234px 0; /* last frame */
    -webkit-transform: scale(1);
    margin: 0 auto;    
    /*Changed transition*/
    -webkit-transition: all .8s;
       -moz-transition: all .8s;
        -ms-transition: all .8s;
            transition: all .8s;
}
.tree-hidden {
    /* background-position: 26px 0; */ /* empty, before first frame */
    width: 0;
    -webkit-transform: scale(0);
}