css3实现div动画效果（横向循环播放，首尾相连）（animation和transform）

1.html片段，循环部分需要写两遍，保证首尾相连的连贯性

   <div class="left_4_widtha">
              <div class="left_4t">
                <div
                  id="img1"
                  class="left4_1"
                  style=""
                  :class="[
                    {
                      a: leftList_4.value[0] < 50,
                    },
                    {
                      b: leftList_4.value[0] >= 50,
                    },
                    { css_4: cssNum === 1 },
                  ]"
                  @click="leftTc_4((name = leftList_4.bt[0]))"
                >
                  <span style="color: #00deed">{{ leftList_4.value[0] }}</span> <br />{{
                    leftList_4.bt[0]
                  }}
                </div>
                <div
                  class="left4_1"
                  :class="[
                    {
                      a: leftList_4.value[1] < 50,
                    },
                    {
                      b: leftList_4.value[1] >= 50,
                    },
                    { css_4: cssNum === 1 },
                  ]"
                  @click="leftTc_4((name = leftList_4.bt[1]))"
                >
                  <span style="color: #00deed">{{ leftList_4.value[1] }}</span> <br />{{
                    leftList_4.bt[1]
                  }}
                </div>
                <div
                  class="left4_1"
                  :class="[
                    {
                      a: leftList_4.value[2] < 50,
                    },
                    {
                      b: leftList_4.value[2] >= 50,
                    },
                    { css_4: cssNum === 1 },
                  ]"
                  @click="leftTc_4((name = leftList_4.bt[2]))"
                >
                  <span style="color: #00deed">{{ leftList_4.value[2] }}</span> <br />{{
                    leftList_4.bt[2]
                  }}
                </div>
                <div
                  class="left4_1"
                  :class="[
                    {
                      a: leftList_4.value[3] < 50,
                    },
                    {
                      b: leftList_4.value[3] >= 50,
                    },
                    { css_4: cssNum === 1 },
                  ]"
                  @click="leftTc_4((name = leftList_4.bt[3]))"
                >
                  <span style="color: #00deed">{{ leftList_4.value[3] }}</span> <br />{{
                    leftList_4.bt[3]
                  }}
                </div>
                //以下为复制部分，和上面内容完全一样
                <div
                  id="img1"
                  class="left4_1"
                  style=""
                  :class="[
                    {
                      a: leftList_4.value[0] < 50,
                    },
                    {
                      b: leftList_4.value[0] >= 50,
                    },
                    { css_4: cssNum === 1 },
                  ]"
                  @click="leftTc_4((name = leftList_4.bt[0]))"
                >
                  <span style="color: #00deed">{{ leftList_4.value[0] }}</span> <br />{{
                    leftList_4.bt[0]
                  }}
                </div>
                <div
                  class="left4_1"
                  :class="[
                    {
                      a: leftList_4.value[1] < 50,
                    },
                    {
                      b: leftList_4.value[1] >= 50,
                    },
                    { css_4: cssNum === 1 },
                  ]"
                  @click="leftTc_4((name = leftList_4.bt[1]))"
                >
                  <span style="color: #00deed">{{ leftList_4.value[1] }}</span> <br />{{
                    leftList_4.bt[1]
                  }}
                </div>
                <div
                  class="left4_1"
                  :class="[
                    {
                      a: leftList_4.value[2] < 50,
                    },
                    {
                      b: leftList_4.value[2] >= 50,
                    },
                    { css_4: cssNum === 1 },
                  ]"
                  @click="leftTc_4((name = leftList_4.bt[2]))"
                >
                  <span style="color: #00deed">{{ leftList_4.value[2] }}</span> <br />{{
                    leftList_4.bt[2]
                  }}
                </div>
                <div
                  class="left4_1"
                  :class="[
                    {
                      a: leftList_4.value[3] < 50,
                    },
                    {
                      b: leftList_4.value[3] >= 50,
                    },
                    { css_4: cssNum === 1 },
                  ]"
                  @click="leftTc_4((name = leftList_4.bt[3]))"
                >
                  <span style="color: #00deed">{{ leftList_4.value[3] }}</span> <br />{{
                    leftList_4.bt[3]
                  }}
                </div>
              </div>
            </div>复制

 2.css部分，两种轮播效果都可使用，看自己需求

 
.left_4_widtha {
  width: 80%;
  height: 50%;
  overflow: auto;
  margin-left: 90px;
}
.left_4t {
  width: 200%;
  height: 100%;
  float: left;
  overflow: auto;
}
.left4_1 {
  width: 100px;
  height: 100%;
  float: left;
  margin-top: 5px;
  padding-top: 25px;
  text-align: center;
  cursor: pointer;
  /* animation: scrolltop 10s step-start infinite; */ //逐帧轮播
  animation: scrolltop 12s linear infinite;//普通轮播
}
@keyframes scrolltop {
  0% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-200%);
  }
  75% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
}
.left_4t > .a {
  background: url(../../assets/蓝色.png) 50% 50% no-repeat;
}
.left_4t > .b {
  background: url(../../assets/bz_6.png) 50% 50% no-repeat;
}复制

3.效果图（截不了动态的）