Logo ticker in HTML / CSS

Question

Does anyone know how to code this in just HTML and CSS?

http://cmoreira.net/logos-showcase/infinite-loop-ticker-carousel/

I'm looking to add the gradient to both sides and I prefer doing it without JS.

I've come up with something on codepen but I have a couple of issues:

1. The ticker is refreshed when $duration ends. I want it too loop infinitely.
2. I can't think of a way to add the gradient to both sides.

(I'm a designer, I have little knowledge of code)

CSS

$duration: 30s;

@-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}

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

@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}

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

.ticker-wrap {

position: fixed;
width: 100%;
overflow: hidden;
height: 100px;
background-color: rgba(#fff, 0.0); 
padding-left: 100%; 

}
}

.ticker {

display: inline-block;
height: 100px;
line-height: 5rem;  
white-space: nowrap;
padding-right: 80%;

-webkit-animation-iteration-count: infinite; 
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: $duration;
animation-duration: $duration;

&__item {

display: inline-block;

padding: 0 2rem;
font-size: 2rem;
color: white;   

}
}
body { padding-bottom: 5rem; }
h1,h2,p {padding: 0 5%;}

HTML

<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150">
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>
<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png" alt="Image" height="100" width="150"></div>

Answer 1

You should be able to just edit the variables at the top and make this fit your purpose. You'll need enough images to at least cover the space you want to fill and then a bit more (in order for the continuous affect to work).

.scrolling_banner {
  --banner-width: 300px;
  --banner-height: 200px;
  --banner-margin-bottom: 10px;
  --banner-margin-right: 5px;
  --banner-items: 6;
  --banner-duration: 2s;
}

.container {
  width: 100%;
  overflow: hidden;
}

.scrolling_banner {
  height: var(--banner-height);
  width: calc((var(--banner-width) + var(--banner-margin-right)) * var(--banner-items));
  margin-bottom: calc(var(--banner-margin-bottom)/ 2);
  font-size: 0
}

.scrolling_banner * {
  margin-bottom: var(--banner-margin-bottom);
  margin-right: var(--banner-margin-right);
  height: var(--banner-height);
  width: var(--banner-width);
}

.first {
  -webkit-animation: bannermove var(--banner-duration) linear infinite;
  -moz-animation: bannermove var(--banner-duration) linear infinite;
  -ms-animation: bannermove var(--banner-duration) linear infinite;
  -o-animation: bannermove var(--banner-duration) linear infinite;
  animation: bannermove var(--banner-duration) linear infinite
}

@keyframes bannermove {
  0% {
    margin-left: 0
  }
  100% {
    margin-left: calc((var(--banner-width) + var(--banner-margin-right)) * -1)
  }
}

<div class="container">
  <div class="scrolling_banner">
    <img class="first" src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
    <img src="http://bvivaloyalty.com/wp-content/uploads/2016/12/poseidon.png">
  </div>
</div>