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：查看最终产品的小提琴。我稍微编辑了 CSS 以适应图像尺寸。我使用的图片的链接是http://s16.postimg.org/iwg6gfsd1/qpjitj.png（也在小提琴中）。