文字跑馬燈偶爾會在一些運動品牌或是潮牌看到，裝飾效果很棒又很炫，
以前也是傻傻以為要用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;
    }
  }
}

以上！

今天的code

一樣有任何錯誤或是問題歡迎批評指教！