<section class="flipped">
  <aside class="space">
    <div class="ne red"></div>
    <div class="nw"></div>
  </aside>
  <aside class="space">
    <div class="ne blue"></div>
    <div class="nw"></div>
  </aside>
  <aside class="space">
    <div class="ne red"></div>
    <div class="nw"></div>
  </aside>
  <aside class="space">
    <div class="ne blue"></div>
    <div class="nw"></div>
  </aside>
  <aside class="space">
    <div class="ne red"></div>
    <div class="nw"></div>
  </aside>
  <aside class="space">
    <div class="ne blue"></div>
    <div class="nw"></div>
  </aside>
  <aside class="space">
    <div class="ne red"></div>
  </aside>
  <aside class="space">
    <div class="ne red"></div>
    <div class="nw"></div>
  </aside>
  <aside class="space">
    <div class="ne blue"></div>
    <div class="nw"></div>
  </aside>
  <aside class="space">
    <div class="ne red"></div>
    <div class="nw"></div>
  </aside>
  <aside class="space">
    <div class="ne blue"></div>
    <div class="nw"></div>
  </aside>
  <aside class="space">
    <div class="ne red"></div>
    <div class="nw"></div>
  </aside>
  <aside class="space">
    <div class="ne blue"></div>
    <div class="nw"></div>
  </aside>
  <aside class="space">
    <div class="ne red"></div>
    <div class="nw"></div>
  </aside>
</section>

<section>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw blue"></div>
  </aside>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw red"></div>
  </aside>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw blue"></div>
  </aside>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw red"></div>
  </aside>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw blue"></div>
  </aside>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw red"></div>
  </aside>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw blue"></div>
  </aside>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw red"></div>
  </aside>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw blue"></div>
  </aside>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw red"></div>
  </aside>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw blue"></div>
  </aside>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw red"></div>
  </aside>
  <aside class="space">
    <div class="ne"></div>
    <div class="nw blue"></div>
  </aside>
  <aside class="space">
    <div class="nw red"></div>
  </aside>
</section>

body { background:#ccc; width:400px; margin:0 auto; }
    
section { width:200px; float:left; padding-top:80px; }
section:nth-child(1) { animation:fall 30s linear infinite; }
section:nth-child(2) { animation:rise 30s linear infinite; }

@keyframes fall { 0%,100%{ transform:translateY(-980px); } 50%{ transform:translateY(0); } }

@keyframes rise { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-980px); } }
  
.ne, .nw { display:block; height:50px; width:100px; margin:0 auto; -webkit-transform-origin:right top; -moz-transform-origin:right top; background:#fff;  }
.ne { -webkit-transform:skewY(-19deg); -moz-transform:skewY(-19deg); margin:10px auto -50px; }
.nw { -webkit-transform:skewY(19deg); -moz-transform:skewY(19deg); }

.flipped .ne, .flipped .nw { -webkit-transform-origin:left top; -moz-transform-origin:left top; }

.red { background:#f16152; }
.blue { background:#4d96f0; }
  
aside { margin-top:20px; }