JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="row row-1"></div>
  <div class="row row-2"></div>
  <div class="row row-3"></div>
  <div class="row row-4"></div>
  <div class="row row-5"></div>
  <div class="row row-6"></div>
  <div class="row row-7"></div>
  <div class="row row-8"></div>
  <div class="row row-9"></div>
  <div class="row row-10"></div>
  <div class="row row-11"></div>
  <div class="row row-12"></div>
  <div class="row row-13"></div>
  <div class="row row-14"></div>
  <div class="row row-15"></div>
  <div class="row row-16"></div>
  <div class="row row-17"></div>
  <div class="row row-18"></div>
  <div class="row row-19"></div>
  <div class="row row-20"></div>
  <div class="row row-21"></div>
  <div class="row row-22"></div>
  <div class="row row-23"></div>
  <div class="row row-24"></div>
  <div class="row row-25"></div>
  <div class="row row-26"></div>
  <div class="row row-27"></div>
  <div class="row row-28"></div>
  <div class="row row-29"></div>
  <div class="row row-30"></div>
  <div class="row row-31"></div>
  <div class="row row-32"></div>
  <div class="row row-33"></div>
  <div class="row row-34"></div>
  <div class="row row-35"></div>
  <div class="row row-36"></div>
  <div class="row row-37"></div>
  <div class="row row-38"></div>
  <div class="row row-39"></div>
  <div class="row row-40"></div>
  <div class="row row-41"></div>
  <div class="row row-42"></div>
  <div class="row row-43"></div>
  <div class="row row-44"></div>
  <div class="row row-45"></div>
  <div class="row row-46"></div>
  <div class="row row-47"></div>
  <div class="row row-48"></div>
  <div class="row row-49"></div>
  <div class="row row-50"></div>
  <div class="row row-51"></div>
  <div class="row row-52"></div>
  <div class="row row-53"></div>
  <div class="row row-54"></div>
  <div class="row row-55"></div>
  <div class="row row-56"></div>
  <div class="row row-57"></div>
  <div class="row row-58"></div>
  <div class="row row-59"></div>
  <div class="row row-60"></div>
 ...

SCSS

.container {
  width: 300px;
}

.row {
  height: 1px;
  background-size: cover;
  background-color: #ddd;
  background-image: url(https://source.unsplash.com/NodtnCsLdTE/300x300);
  background-repeat: no-repeat;
}

$scale: 0.5;
$translate: 100%;
$skew: -50deg;
$position: 1;
$duration: 5000ms;

@for $i from 1 through 100 {
  .row-#{$i} {
    $scale: $scale * 1.003;
    $translate: $translate - 1;
    $skew: $skew + 0.5;
    $position: $position - 1 * 1px;
    background-position-y: $position;
    transform: scalex($scale) translateX($translate) skew($skew);
    animation: anim_#{$i};
    animation-duration: $duration;
    animation-timing-function: linear;
  }
}

@for $i from 101 through 150 {
  .row-#{$i} {
    $scale: $scale * (1 + (150 - $i) / 100000);
    $translate: $translate - ((150 - $i) / 100);
    $skew: $skew - ((150 - $i) / 100);
    $position: $position - 1 * 1px;
    background-position-y: $position;
    transform: scalex($scale) translateX($translate) skew($skew);
    animation: anim_#{$i};
    animation-duration: $duration;
    animation-timing-function: linear;
  }
}

@for $i from 151 through 300 {
  .row-#{$i} {
    $scale: $scale * 0.9997;
    $translate: $translate - 0.02;
    $position: $position - 1 * 1px;
    background-position-y: $position;
    transform: scalex($scale) translateX($translate) skew($skew);
    animation: anim_#{$i};
    animation-duration: $duration;
    animation-timing-function: linear;
  }
}

$position: 1;

@for $i from 1 through 300 {
  $position: $position - 1 * 1px;
  
  @keyframes anim_#{$i} {
    0% {
      background-position-y: $position - 301;
    }
    100% {
      background-position-y: $position;
    }
  }
}