css3 animation文字横向循环无缝滚动-广告播放效果

复制一份，然后一定要把播放开始位置设置成0px（css块儿里的固定位置），我刚开始设置的50px，想着有点儿缝隙不贴边儿，结果！根本无法实现无缝滚动。
不想无缝滚动的话就不用复制一份了，代码也不用改。

<div class="notice-card-wrapper">
  <div class="inner-container">
    <div class="content">
      <div class="content-1" style="flex: 1;float: left;">{{'abcdefg'}}</div>
      <div class="content-2" style="flex: 1;">{{'abcdefg'}}</div>
    </div>
  </div>
</div>

css部分

<style lang="scss">
  .notice-card-wrapper {
  .inner-container {
    display: flex;
    margin-left: auto; // 把文字弄出可见区域
    width: auto;
    animation-name: myMove;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-direction: normal;
  }
  /*文字无缝滚动*/
  @keyframes myMove {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(-100%);
    }
  }
}