html - CSS3 无限动画图形

Question

我正在尝试在无限循环中为图表制作动画，使其看起来像是在不断移动并且永不停止(永不存在间隙)。我能够无限地为图像制作动画，但永远不会让它在重新开始之前没有间隙。

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>

我怎样才能让它成为一个流畅的动画，使它看起来像是在不断更新图表？

Answer 1

使用具有 overflow: hidden 的 div 裁剪您的内容。在这种情况下，overflow-x 就足够了。

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/

您必须在最后编辑图像，使其看起来是连续的。只需识别图像的最后一帧并使其看起来与第一帧相同。

编辑:我正在制作图片，稍后会更新。

编辑 2:查看最终产品的 fiddle 。我稍微编辑了 CSS 以适应图像尺寸。我使用的图片链接是 http://s16.postimg.org/iwg6gfsd1/qpjitj.png (也在 fiddle 中)。