gistfile1.css

//Animation to move the bird left to right
@-moz-keyframes birdy-left-right { 
     0% { -moz-transform: translate(500px, 0px); }
    50% { -moz-transform: translate(0px, 0px); }
    100% { -moz-transform: translate(500px, 0px); }
}

//Animation to make the bird flip to point in direction of travel
@-moz-keyframes birdy-flip { 
    40% { -moz-transform: scaleX(1); }
    45% { -moz-transform: scaleX(-1); }
    90% { -moz-transform: scaleX(-1); }
    95% { -moz-transform: scaleX(1); } 
}

// Animation to control the flapping
@-moz-keyframes birdy-sprite { 
    0% { background-position: 0 0; }
    50% { background-position: 0 0; }
    // Quickly switch to the next frame
    50.001% { background-position: 0 -224px; }
    100% { background-position: 0 -224px; }
}

// Default positions/animations
.scene {
    .birdy-left-right {
        // Here we apply the "birdy-left-right" animation for 24s
        -moz-animation: birdy-left-right 24s ease-in-out 0s infinite;
        // Animate left to right a bit faster, notice the nested div above. 
        // This gives the bird a more wavey animation
        &.faster {
            -moz-animation-duration: 8s;
        }
    }
    
    .birdy-flip {
        width: 71px;
        // Here we apply the "birdy-flip" animation notice the 8s time is the 
        // same as the faster left-right, this flips the bird in the right direction
        -moz-animation: birdy-flip 8s ease-in-out 0s infinite
    }

    .birdy {
        width: 71px;
        height: 244px;
        position: absolute:
        background:url(~'../sprites/birdy.png') no-repeat top;
        left: 0px;
        top: -260px;
        
        //Here we apply the "birdy-sprite" animation to make the wings flap
        -moz-animation: birdy-sprite 0.25s ease-in-out 0s infinite alternate;
        -moz-transition-property: top;
        -moz-transition-duration: 2s;
    }
}

// Position when enabled
.scene.scene-home {
    .birdy {
        left: 0px;
        top: -50px;
    }
}