Flying flag effect.

This demo demonstrates how to create a flying flag effect applied on an element with image background using mostly the CSS animation plus some jQuery (less but important). The idea is to fragment the image into many flag elements (with width of 1px and applying different background-positions) and animate the top alternately with different delays. Note that this effect consume fairly much CPU usage so use it when it's really necessary and the smaler the image is, the lesser CPU usage is consumed.

by viphalongpro

HTML

<div class='flag'>
</div>

CSS

.flag {
    width:300px;
    height:200px;
    margin:50px;
}
.flag-element {
    -webkit-animation:oscill 1s ease-in-out infinite alternate; 
    -moz-animation:oscill 1s ease-in-out infinite alternate; 
    -ms-animation:oscill 1s ease-in-out infinite alternate; 
    animation:oscill 1s ease-in-out infinite alternate; 
    background: url('http://i.imgur.com/8VSL8Ve.gif');
    background-size: 300px 100%;
    position:relative;
    height:100%;
    width:1px;
    display:inline-block;
    box-shadow:0 1px grey, 0 -1px gray;
}
@-webkit-keyframes oscill {
    0% {
        top: 5%;
    }        
    100% {
        top: -5%;
    }
}
@-moz-keyframes oscill {
    0% {
        top: 5%;
    }        
    100% {
        top: -5%;
    }
}
@-ms-keyframes oscill {
    0% {
        top: 5%;
    }        
    100% {
        top: -5%;
    }
}
@keyframes oscill {
    0% {
        top: 5%;
    }        
    100% {
        top: -5%;
    }
}

JavaScript

var h = $('.flag').width();
for(var i = 0; i < h; i++){
    var flagElement = $("<div class='flag-element'>");
    flagElement.css('background-position', -i + "px 0");
    flagElement.css('-webkit-animation-delay', i * 10 + 'ms');
    flagElement.css('-moz-animation-delay', i * 10 + 'ms');
    flagElement.css('-ms-animation-delay', i * 10 + 'ms');
    flagElement.css('animation-delay', i * 10 + 'ms');
    $('.flag').append(flagElement);
}