CSS animations

<style>
@-webkit-keyframes graph_animation {
  0%   { background-position: 0 bottom }
  100% { background-position: -10000px bottom }
}
@-moz-keyframes graph_animation {
  0%   { background-position: 0 bottom }
  100% { background-position: -10000px bottom }
}
@-o-keyframes graph_animation {
  0%   { background-position: 0 bottom }
  100% { background-position: -10000px bottom }
}
@keyframes graph_animation {
  0%   { background-position: 0 bottom }
  100% { background-position: -10000px bottom }
}
.graph {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 240px;
    background: url(img/blue.png) repeat-x 0 bottom; //CHANGE THE PATH OF IMAGES AND NAME
    -webkit-animation: graph_animation 130s linear infinite;
    -moz-animation: graph_animation 130s linear infinite;
    -o-animation: graph_animation 130s linear infinite;
    animation: graph_animation 130s linear infinite;
}
.graph:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 240px;
    background: url(img/green.png) repeat-x 0 bottom; //CHANGE THE PATH OF IMAGES AND NAME
    -webkit-animation: graph_animation 250s linear infinite;
    -moz-animation: graph_animation 250s linear infinite;
    -o-animation: graph_animation 250s linear infinite;
    animation: graph_animation 250s linear infinite;
}

</style>




<!--  -->
<div class="graph"></div>