css3动画实现无缝轮播走马灯

通过css3可以创建炫酷的动画特效让页面效果倍增，提高用户的使用感官。同时css动画可以被浏览器优化，提升性能，并且css动画相对js动画来说代码会更加简单。但是同时css动画控制不够灵活，兼容性不够好缺点也是同样的显著。不过脑洞够大就可以创造足够灵活的动画，怎么选择还是看具体的需求情况。
通过css动画实现一个简单的走马灯效果，对应的代码如下，简单易懂，分段控制还可以实现滚动，暂停再继续滚动的效果

<template>
  <section>
    <div class="wrap-card">
      <ul class="cards">
        <li v-for="(color,i) in bgColors" :key="i" :style="{background: color}">{{ color }}</li>
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      bgColors: ['#E65D6E', '#30B08F', '#4AB7BD', '#FEC171', '#1890ff']
    }
  },
  created() {
    // 复制第一个数据到最后实现无缝轮播
    this.bgColors = this.bgColors.concat(this.bgColors.slice(0, 1))
  }
}
</script>

<style lang="scss">
$cardHeight: 200px;
$cardWidth: 500px;

.wrap-card {
  margin: 20px auto;
  width: $cardWidth;
  height: $cardHeight;
  overflow: hidden;
  ul {
    width: 6 * $cardWidth;
  }
  li {
    float: left;
    width: $cardWidth;
    height: 100%;
    font-size: 40px;
    font-weight: 600;
    color: #ffffff;
    line-height: $cardHeight;
  }
}

.cards {
  animation: Carousel 10s  linear infinite;
  position: relative;
}
@keyframes Carousel {
  from {
    left: 0;
  }
  to {
    left: -5 * $cardWidth;
  }
}
</style>

修改帧动画达到移动暂停再移动的效果

@keyframes Carousel {
  0% {
    left: 0;
  }
  10% {
    left: 0;
  }
  20% {
    left: -$cardWidth;
  }
  30% {
    left: -$cardWidth;
  }
  40% {
    left: -2 * $cardWidth;
  }
  50% {
    left: -2 * $cardWidth;
  }
  to {
    left: -5 * $cardWidth;
  }
}