CSS动画SVG与多个parralellograms

Question

我创建了一个codepen来说明我要做的事情。在笔中你可以看到我有三个图像被剪裁并重新定位以创建动画。这不是正确的方法！

<div class="container">
<img src="https://i.pinimg.com/736x/ea/60/96/ea60962de52847e04ab26f9e57aed306--senior-portraits-senior-photos.jpg"/>
  <div class="block left_block">
    <img src="https://i.pinimg.com/originals/90/c4/f4/90c4f42682745576f146d1c5f686b5c3.jpg"/>
  </div>
  <div class="block center_block">
    <img src="https://i.pinimg.com/originals/90/c4/f4/90c4f42682745576f146d1c5f686b5c3.jpg"/>
  </div>
  <div class="block right_block">
    <img src="https://i.pinimg.com/originals/90/c4/f4/90c4f42682745576f146d1c5f686b5c3.jpg"/>

  </div>
</div>


.container{width:300px;height:500px;display:block;background-color:#000;position:relative;margin:0 auto;overflow:hidden}
.container .block{animation-delay:5s;position:absolute;top:0px;width:150px;height:500px;margin:0px;padding:0px;-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);}

.container .left_block{background-color:red;left:-37px;}
.container .center_block{background-color:blue;left:75px;z-index:10;}
.container .center_block img{position:absolute;left:-112px}
.container .right_block{background-color:green;right:-37px}
.container .right_block img{position:absolute;left:-224px}

.left_block {animation: animate_left 3.4s infinite forwards ease-out;}
.center_block {animation: animate_center 3.4s infinite forwards ease-out;}
.right_block {animation: animate_right 3.4s infinite forwards ease-out;}

@keyframes animate_left
{
  0%
  {
    left:-37px;
    top:0px;
  }
  100%
  {
    left:0px;
    top:-100%;
    opacity:0;
  }
}

@keyframes animate_center
{
  0%
  {
    left:75px;
    top:0px;
  }
  100%
  {
    left:38px;
    top:100%;
    opacity:0;
  }
}

@keyframes animate_right
{
  0%
  {
    top:0px;
  }
  100%
  {
    right:-68px;
    top:-100%;
    opacity:0;
  }
}

我想使用ONE图像和带有3个平行四边形蒙版的SVG进行相同的动画制作。我尝试这样做，但我无法让SVG响应或让平行四边形正确定位。

如果有人知道如何实现这一目标，我将非常感激。