JSFiddle - React, Tailwind, and code Playground

by Ketan Patel

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://www.techicy.com/wp-content/uploads/2015/01/Indian-Flag-Wallpapers-HD-Images-Free-Download-2.jpg');
    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);
}