bird.html

<div class="scene">
    <div class="birdy-left-right">
        <div class="birdy-left-right faster">
            <div class="birdy-flip">
                <div class="birdy"></div>
            </div>
        </div>
    </div>
</div>

mixins.sass

// Position mixins

.sprite(@name, @width, @height) {
    width:@width * 1px;
    height:@height * 1px;
    position: absolute;
    background:url(~'../sprites/@{name}.png') no-repeat top;
}

.xy(@left,@top) {
    left: @left * 1px;
    top: @top * 1px;
}

// Transform mixins

.translated(@left, @top) {
    -webkit-transform: translate(@left * 1px, @top * 1px);
    -moz-transform: translate(@left * 1px, @top * 1px);
    -o-transform: translate(@left * 1px, @top * 1px);
    -ms-transform: translate(@left * 1px, @top * 1px);
    transform: translate(@left * 1px, @top * 1px);
}

.mirrored() {
   -webkit-transform: scaleX(-1);
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -ms-transform: scaleX(-1);
   transform: scaleX(-1);
}

.not-mirrored() {
   -webkit-transform: scaleX(1);
   -moz-transform: scaleX(1);
   -o-transform: scaleX(1);
   -ms-transform: scaleX(1);
   transform: scaleX(1);
}

// Transition mixins

.transition-property(...) {
    @props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
    -webkit-transition-property: @props;
    -moz-transition-property: @props;
    -o-transition-property: @props;
    transition-property: @props;
}

.duration(@time) {
    -webkit-transition-duration: @time;
    -moz-transition-duration: @time;
    -o-transition-duration: @time;
    transition-duration: @time;
}

// Animation mixins

.animation(...) {
    -webkit-animation: @arguments;
    -moz-animation: @arguments;
    -o-animation: @arguments;
    animation: @arguments;
}

.animation-duration(@time) {
    -webkit-animation-duration: @time;
    -moz-animation-duration: @time;
    -o-animation-duration: @time;
    animation-duration: @time;
}

// Frame mixins

.frame-swap(@height, @percent, @frameA, @frameB) {
    .frame(@height, @percent, @frameA);
    .frame(@height, @percent + 0.001%, @frameB);
}

.frame(@height, @percent, @frame) {
   (~"@{percent}") { .frame-position(@height, @frame); }
}

.frame-position(@height, @frame) {
    background-position: 0 -@height * (@frame - 1) * 1px;
}

sprites.less

// Bird left/right animation

.birdy-left-right-frames() {
    0% { .translated(500, 0); }
    50% { .translated(0, 0); }
    100% { .translated(500, 0); }
}

@-webkit-keyframes birdy-left-right { .birdy-left-right-frames(); }
@-moz-keyframes birdy-left-right { .birdy-left-right-frames(); }
@-o-keyframes birdy-left-right { .birdy-left-right-frames(); }
@keyframes birdy-left-right { .birdy-left-right-frames(); }

// Bird flip animation

.birdy-flip-frames() {
    40% { .not-mirrored(); }
    45% { .mirrored(); }
    90% { .mirrored(); }
    95% { .not-mirrored(); }
}

@-webkit-keyframes birdy-flip { .birdy-flip-frames(); }
@-moz-keyframes birdy-flip { .birdy-flip-frames(); }
@-o-keyframes birdy-flip { .birdy-flip-frames(); }
@keyframes birdy-flip { .birdy-flip-frames(); }

// Bird frames animation

.birdy-sprite-frames() {
    @height: 224px;

    .frame(@height, 0%, 1);
    .frame-swap(@height, 50%, 1, 2);
    .frame(@height, 100%, 2);
}

@-webkit-keyframes birdy-sprite { .birdy-sprite-frames(); }
@-moz-keyframes birdy-sprite { .birdy-sprite-frames(); }
@-o-keyframes birdy-sprite { .birdy-sprite-frames(); }
@keyframes birdy-sprite { .birdy-sprite-frames(); }

// Default positions/animations

.scene {
    .birdy-left-right {
        .animation(birdy-left-right 24s ease-in-out 0s infinite);
    
        &.faster {
            .animation-duration(8s);
        }
    }
    
    .birdy-flip {
        width: 71px;
        .animation(birdy-flip 8s ease-in-out 0s infinite);
    }

    .birdy {
        .sprite('birdy', 71, 224);
        .xy(0,-260);
        .animation(birdy-sprite 0.25s ease-in-out 0s infinite alternate);
        .transition-property(top);
        .duration(2s);
    }
}

// Position when enabled

.scene.scene-home {
    .birdy {
        .xy(0,-50);
    }
}