CSS3 infinite animate a graph

Question

I am trying to animate a graph on an infinite loop so that it looks like the graph is constantly moving and never stops (never has a gap). I am able to animate an image infinitely but never so that it doesn't have a gap before starting over.

Jsfiddle: https://jsfiddle.net/otv52zxb/1/

@-webkit-keyframes loop {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-66.6%);
    -ms-transform: translateX(-66.6%);
    -webkit-transform: translateX(-66.6%);
    transform: translateX(-66.6%);
  }
}
@-moz-keyframes loop {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-66.6%);
    -ms-transform: translateX(-66.6%);
    -webkit-transform: translateX(-66.6%);
    transform: translateX(-66.6%);
  }
}
@-ms-keyframes loop {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-66.6%);
    -ms-transform: translateX(-66.6%);
    -webkit-transform: translateX(-66.6%);
    transform: translateX(-66.6%);
  }
}
@keyframes loop {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-66.6%);
    -ms-transform: translateX(-66.6%);
    -webkit-transform: translateX(-66.6%);
    transform: translateX(-66.6%);
  }
}
section {
  background-color: #ababab;
  height: 300px;
  position: relative;
  z-index: -1000;
}
#blue_graph {
  z-index: -100;
  position: absolute;
  bottom: 0;
  left: 0px;
  right: 0px;
  margin: auto;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: loop 10s linear infinite;
  -moz-animation: loop 10s linear infinite;
  -o-animation: loop 10s linear infinite;
  animation: loop 10s linear infinite;
}

<section>
  <img id="blue_graph" src="http://i58.tinypic.com/qpjitj.png" />
</section>

How can I get this to be a smooth animation so that it looks like the graph is constantly being updated?

Answer 1

Crop what you have with a div that has overflow: hidden. In this case, overflow-x is enough.

HTML:

<div id="crop-div">
    <section>
        <img id="blue_graph" src="http://i58.tinypic.com/qpjitj.png" />
    </section>
</div>

CSS:

/* new css */
#crop-div{
    overflow-x:hidden;
    height: 210px;
    width: 400px;
}
/* original css -- EDITED TO FIT DIMENSIONS */
@-webkit-keyframes loop {
    0% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -moz-transform: translateX(-1594px); /* -1594px = crop-div's width - img's width */
        -ms-transform: translateX(-1594px);
        -webkit-transform: translateX(-1594px);
        transform: translateX(-1594px);
    }
}
@-moz-keyframes loop {
    0% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -moz-transform: translateX(-1594px);
        -ms-transform: translateX(-1594px);
        -webkit-transform: translateX(-1594px);
        transform: translateX(-1594px);
    }
}
@-ms-keyframes loop {
    0% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -moz-transform: translateX(-1594px);
        -ms-transform: translateX(-1594px);
        -webkit-transform: translateX(-1594px);
        transform: translateX(-1594px);
    }
}
@keyframes loop {
    0% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -moz-transform: translateX(-1594px);
        -ms-transform: translateX(-1594px);
        -webkit-transform: translateX(-1594px);
        transform: translateX(-1594px);
    }
}
section {
    background-color: #ababab;
    height: 210px;
    position: relative;
    z-index: -1000;
}
#blue_graph {
    z-index: -100;
    position: absolute;
    bottom: 0;
    left: 0px;
    right: 0px;
    margin: auto;
    height:210px; /*added this */
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation: loop 10s linear infinite;
    -moz-animation: loop 10s linear infinite;
    -o-animation: loop 10s linear infinite;
    animation: loop 10s linear infinite;
}

https://jsfiddle.net/otv52zxb/3/

You'll have to edit the image at the end so it looks continuous. Just identify the last frame of the image and make it look the same at the first frame.

Edit: I am making the image and will update it in a minute.

Edit 2: See the fiddle for the final product. I edited the CSS a little bit to fit the image dimensions. The link to the image I used is http://s16.postimg.org/iwg6gfsd1/qpjitj.png (also in the fiddle).