CSS sprite sheet animation

HTML

This image is used for the CSS3 step transition below:
<img src="http://rolandschuetz.at/docs/tree-animated.png" />
<br>

<h1>The bug:</h1>
    <div class="outer">
    <div class="tree"></div>        
    </div>


<a href="#" class="show-hide">show/hide</a><br>
<a href="#" class="trigger-bug">trigger bug</a>

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

JavaScript

// Sprite Sheet transition with CSS3 using the steps() feature.
// To change the speed, just edit the ".8s" animation time.

// Inspired by Lea's typing animation: http://t.co/9RPMmV7

$('.show-hide').click(function() {
    $('.tree').toggleClass('tree-hidden');
});
$('.trigger-bug').click(function() {
    $('.tree').toggleClass('tree-hidden');
    setTimeout(function() {
        // trigger the next animation before the current one is finished
        $('.tree').toggleClass('tree-hidden');
    }, 1600);
});