向上循环滚动的动画，纯CSS实现一张背景图片的无缝衔接自动循环向上滚动

首先了解一下 CSS3 @keyframes 规则

不了解 css3 动画的请点击下方
参考文档： CSS3 @keyframes 规则.
CSS3 animation 属性 .

实现方法
使用background-position 背景图片定位实现。

html

 <div class="bag">
      <div id="imgBgc">
        <p>此文本是与图片分离的p>
      div>
    div>

css

@-webkit-keyframes scrollToUp {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0 -258px;  // 向上滚动则就是图片的高度的负值，否则为图片的宽度，也可以百分比
    }
  }
  @keyframes scrollToUp {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0 -258px;
    }
  }

再使用animation属性引入

#imgBgc{
    height: 1000px;
    background-image: url("./../assets/bac.svg"); /* 什么图片都可以*/
    background-attachment: fixed; /* 让背景图片和文本脱离*/
    background-position: center center;
    -webkit-animation: scrollToUp 5s linear infinite; /* 引入 scrollToUp动画  linear 表示匀速执行动画可避免卡顿*/
    animation: scrollToUp 5s linear infinite;
  }

效果

效果图是gif图所以看着会有跳动感。实际运行出来无任何跳动感。