CSS3 transition abort causes ugly animation

Question

I'm using a CSS3 step transition to animate a sprite from one state to another.

When I start one animation it shows the frames one at a time and has a nice transition effect (click "show/hide" link in the example). But when a second transition is triggered while the first one is still running the frame position get's lost and it looks like it scrolls to the other side instead of maintaining the frame-by-frame animation (click "trigger bug" in the 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 */
}

Is there a way to force the animation to work correctly even when it aborted an older one?

PS: Please not try to "fix" by trigger-bug button which is only there for demo purposes. The real problem is triggered by fast user interaction which should have immediate feedback.

Answer 1

Updated code

Check if this helps you.

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