Pastebin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>logos</title>
  <style>
    body, h1, h2 {
      font-family: sans-serif;
        text-align: center;
    }
    .moving-logos-wrapper {
      max-width: 800px;
      overflow: hidden;
      margin: auto;

    }

    .moving-logos-inner {
      background: url('logos.png') 0/contain repeat-x;
        border: 1px solid gray;
      height: 150px;
        width: 60000px;
        -webkit-animation: moving-logos 40s linear infinite;
        animation: moving-logos 40s linear infinite;
    }

    .moving-logos-inner-bw {
        background: url('logos-bw.png') 0/contain repeat-x;
        border: 1px solid gray;
        height: 150px;
        width: 60000px;
        -webkit-animation: moving-logos 40s linear infinite;
        animation: moving-logos 40s linear infinite;
    }

    @keyframes moving-logos {
        0%{
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        100%{
            -webkit-transform: translate3d(-1500px, 0, 0);
            transform: translate3d(-1500px, 0, 0);
        }
    }
  </style>
</head>
<body>

<section class="">
    <h2 class="">Logos</h2>
    <div class="moving-logos-wrapper">
        <div class="moving-logos-inner">
        </div>
    </div>

    <h2 class="">Logos bw</h2>
    <div class="moving-logos-wrapper">
        <div class="moving-logos-inner-bw">
        </div>
    </div>
</section>
</body>
</html>