JSFiddle - React, Tailwind, and code Playground

by Sandra Caroline Hansen

HTML

<div class="scrollable">
    <div class="items">
<img src="http://i67.tinypic.com/106hkci.jpg" class="finn-no-img-small-size" alt="1" />
<img src="http://i65.tinypic.com/29p2kww.jpg" class="finn-no-img-small-size" alt="2" />
<img src="http://i68.tinypic.com/21j4snp.jpg" class="finn-no-img-small-size" alt="" />
<img src="http://i66.tinypic.com/2h7nrdk.jpg" class="finn-no-img-small-size" alt="" />
<img src="http://i66.tinypic.com/2h7nrdk.jpg" class="finn-no-img-small-size" alt="" />
<img src="http://i65.tinypic.com/zj8k1w.jpg" class="finn-no-img-small-size" alt="" />
    </div>
</div>

CSS

/**/

.finn-no-img-small-size {
    /* max-height: 99px; */
    max-width: 149px;
    margin: 3px 0 0 0;
    opacity: 1.5;

}

/**/ 

body {
    padding: 1em;
    background: #999
}
.scrollable {
    width: 149px;
    height: 607px;
    margin: 0 auto;
    padding: 0;
    /* border: 1px solid #fff; */
    background: #000;
    position: relative;
    overflow: hidden;
    text-align: center;
}
img {
    max-height: 400px;
    margin: 0 auto;
    display: block;
}
.items {
    -webkit-animation: scroll 25s infinite;
    -moz-animation: scroll 25s infinite;
    -ms-animation: scroll 25s infinite;
}

@-webkit-keyframes scroll {
  0%   { margin-top: 0; }
10%  { margin-top: 0 }
30%  { margin-top: 0px; }
50% { margin-top: -100px; }
60% { margin-top: -20px; }
80% { margin-top: -30px; }
  800%  { margin-top: -10px; }
}
@-moz-keyframes scroll {
  0%   { margin-top: 0; }
27.33%  { margin-top: 0 }
  33.33%  { margin-top: 0px; }
34.66% { margin-top: 100px; }
66.66% { margin-top: 200px; }
94.99% { margin-top: 300px; }
  100%  { margin-top: 400px; }
}
@-ms-keyframes scroll {
  0%   { margin-top: 0; }
27.33%  { margin-top: 0 }
  33.33%  { margin-top: -0px; }
60.66% { margin-top: -100px; }
66.66% { margin-top: -200px; }
94.99% { margin-top: -300px; }
  100%  { margin-top: -400px }
}