#6-无限文字Logo跑马灯 (不用JS! CSS Animation)

文字跑马灯偶尔会在一些运动品牌或是潮牌看到，装饰效果很棒又很炫，
以前也是傻傻以为要用JS写，侦测跑完了再放下一段......
但在Youtube看到这个教学影片）
发现，哇靠只要CSS的animation 就可以做到！！
~~大家都去这个频道看酷炫效果就不用看我的铁人30了~~

另外就是一些官网常常会放上一些合作品牌的Logo，
放不下了就会让他用跑马灯的方式进行，也可以用同样的方式去做～
先来看看我的成果吧！

DJ风?或是很适合配嘻哈潮牌～
原理呢～就是做一个假的在要跑的东西的屁股後面，animation全部花40s

本尊从translateX(100%)跑到translateX(0%)
复制人从translateX(0)跑到translateX(-200%)，并且让他animation-delay: -20s
animation-delay是负值的话，画面一开始的0秒，就会让他好像已经跑了20秒的样子～

上图说明：
]

直接上部分code （logo的）:

//html
<section>
   <div class="logo-wall">
		//本尊！
    <div class="logo-wrapper first">
      <div class="logo"><span>logo</span></div>
      <div class="logo"><span>logo</span></div>
      ...省略
    </div>
		//复制人！
    <div class="logo-wrapper second">
      <div class="logo"><span>logo</span></div>
      <div class="logo"><span>logo</span></div>
      ...省略
    </div>
  </div>
<section>

//scss
@keyframes scroll{
  from{transform: translateX(100%)}
  to{transform: translateX(-100%)}
}

@keyframes scroll2{
  from{transform: translateX(0%)}
  to{transform: translateX(-200%)}
}

.logo-wall{
  display: flex;

  .logo-wrapper{
    display: flex;
    animation: scroll 40s linear infinite;

    &:nth-child(2){
    animation: scroll2 40s linear infinite;
    animation-delay: -20s;
    }

    &.first>.logo:first-child{
      background: blue;
    }

    &.second>.logo:first-child{
      background: red;
    }
    .logo{
    width: 150px;
    height: 150px;
    margin: 0 10px;
    border-radius: 50%;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    }
  }
}