<header class="header ticker-wrapper">
  <div class="ticker-wrapper__first-half">
    <img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
    <p>просто для новичков, выгодно для каждого</p>
    <img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
    <p>просто для новичков, выгодно для каждого</p></div>
  <div class="ticker-wrapper__second-half">
  <img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
    <p>просто для новичков, выгодно для каждого</p>
    <img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
    <p>просто для новичков, выгодно для каждого</p>
    
  </div>
  
</header>

.header {
  background: #212121;
  overflow: hidden;
  height: 65px;
  position: relative;

  div {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 65px;
    transform: translate(100%, 0);

    p {
      font-family: 'Roboto', sans-serif;
      color: #fff339;
      text-transform: uppercase;
    }
    img{
      height: 60px;
    }
  }

  $duration: 30s;

  .ticker-wrapper__first-half, .ticker-wrapper__second-half {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    animation: ticker $duration infinite linear forwards;
  }

  .ticker-wrapper__second-half {
    animation: $duration ticker $duration/2 infinite linear forwards;
  }
}

@keyframes ticker {
  0% {
    transform: translate(100%, 0);
  }

  50% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}