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

Question

我正在使用 CSS3 步进过渡将 Sprite 从一种状态动画化到另一种状态。

当我启动一个动画时，它一次显示一个帧并且具有很好的过渡效果(单击 example 中的“显示/隐藏”链接)。但是当第一个转换仍在运行时触发第二个转换时，帧位置丢失并且看起来它滚动到另一侧而不是保持逐帧动画(单击 example 中的“触发错误” ).

.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

Updated code

检查这是否对您有帮助。

HTML

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