Clever Geek Handbook

CSS3 animates graphics endlessly

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 can animate the image endlessly, but never so that it doesn't have a gap before starting.

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>
Run codeHide result


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

+3


source to share


1 answer


Trim what you have with div

s overflow: hidden

. In this case, overflow-x

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 width - img 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 will need to edit the image at the end to make it appear continuous. Just define the last frame of the image and make it the same in the first frame.

Edit: I take an image and update it after a minute.

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

+1


source






More articles:


All Articles