动画CSS背景显示闪烁

Question

https://jsfiddle.net/v4ufeuzg/

＆＃13;

＆＃13;

.bg {
          height: 400px;
          width:200px;
    background: url(http://i.imgur.com/kVSeaKo.jpg) repeat-y center center;
    background-size: contain;
    -webkit-animation: displace 1s linear infinite;
    animation: displace 1s linear infinite;
    }
    @-webkit-keyframes displace {
      from { background-position: top center;
      } to { background-position: bottom center; }
    }
    @keyframes displace {
      from { background-position: top center;
      } to { background-position: bottom center; }
    }

＆＃13;

<textarea class="bg"></textarea>

＆＃13;

＆＃13;

＆＃13;

每次到达循环结束时背景轻弹，有什么方法可以解决这个问题吗？

Answer 1

我认为背景位置（x，y）

可能设置背景大小，然后设置该距离的动画或该距离的倍数。

http://codepen.io/sheriffderek/pen/VjAQJA

样式

这些都在手写笔中......但功能应该清晰 - 它只是简化了。

@keyframes displace
    from
        background-position: center 100px
    to
        background-position: center 0px

.road
    width: 200px
    height: 400px
    background-image: url(http://i.imgur.com/kVSeaKo.jpg)
    background-size: 200px 100px
    animation: displace 1s linear infinite

另外，请记住CSS动画并不完美。