Бегущая строка только на CSS

<div class="section-marquee">
  <div class="marquee-content">
    <ul class="marquee-list marquee">
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/ten.svg" alt="ten">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/atom.svg" alt="atom">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/ugmk.svg" alt="ugmk">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/prinzip.svg" alt="prinzip">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/forum.svg" alt="forum">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/skm.svg" alt="skm">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/cleverpark.svg" alt="cleverpark">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/novosel.svg" alt="novosel">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/b72.svg" alt="b72">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/pravobereg.svg" alt="pravobereg">
      </li>
    </ul>
    <!-- /.marquee-list -->
    <ul aria-hidden="true" class="marquee-list marquee">
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/ten.svg" alt="ten">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/atom.svg" alt="atom">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/ugmk.svg" alt="ugmk">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/prinzip.svg" alt="prinzip">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/forum.svg" alt="forum">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/skm.svg" alt="skm">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/cleverpark.svg" alt="cleverpark">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/novosel.svg" alt="novosel">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/b72.svg" alt="b72">
      </li>
      <li class="marquee-list__item">
        <img src="/assets/img/marquee/pravobereg.svg" alt="pravobereg">
      </li>
    </ul>
    <!-- /.marquee-list -->

  </div>
  <!-- /.marquee-wrap -->
</div>
<!-- /.section-marquee -->

.section-marquee {
  padding: 32px 0;
  margin-bottom: 22px;

  @media #{$desktop} {
    padding: 64px 0;
    margin-bottom: 48px;
  }
}

.marquee {
  &-content {
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 20px;

    &:before, &:after {
      content: "";
      height: 100%;
      top: 0;
      width: 10%;
      position: absolute;
      z-index: 1;
      pointer-events: none;
    }
  }

  &-list {
    flex-shrink: 0;
    display: flex;
    gap: 20px;
    counter-reset: item;
    justify-content: space-around;
    min-width: 100%;

    &.marquee {
      animation: scroll 20s linear infinite;
    }

    &__item {
      flex: 0 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      font-weight: bold;
      color: #fff;
      margin: 0 20px;
      transition: all 0.1s ease-in-out;

      @media #{$tablet} {
        margin: 0 32px;
      }

      @media #{$desktop} {
        margin: 0 48px;
      }

      @media #{$ultra} {
        margin: 0 63px;
      }

      img {
        max-height: 56px;

        @media #{$ultra} {
          max-height: 100%;
        }
      }
    }
  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 20px));
  }
}