<div id="background" class="clip"></div>
<div id="clip3" class="clip"></div>
<div id="clip4" class="clip"></div>
<div id="clipa" class="clip"></div>
<div id="clip1" class="clip"></div>
<div id="clip2" class="clip"></div>
<div id="clipb" class="clip"></div>

html, body{
  height:100%;
  margin:0px;
}
@keyframes clip1{
  0%{clip-path: polygon(0% -50%, 50% -50%, -50% 50%, -100% 50% );}
  100%{clip-path: polygon(150% 50%, 200% 50%, 100% 150%, 50% 150%);}
}
@keyframes clipa{
  0%{clip-path: polygon(-5% -55%, 55% -45%, -45% 55%, -95% 55% );}
  100%{clip-path: polygon(150% 50%, 200% 50%, 100% 150%, 50% 150%);}
}
@keyframes clip2{
  0%{clip-path: polygon(50% -50%, 100% -50%, 200% 50%, 150% 50%);}
  100%{clip-path: polygon(-100% 50%, -50% 50%, 50% 150%, 0% 150%);}
}
@keyframes clipb{
  0%{clip-path: polygon(40% -60%, 100% -50%, 190% 40%, 150% 50%);}
  100%{clip-path: polygon(-100% 50%, -50% 50%, 50% 150%, 0% 150%);}
}
@keyframes clip3{
  0%{clip-path: polygon(-100% -150%, -50% -150%, -150% -50%, -200% -50%);}
  100%{clip-path: polygon(150% 50%, 200% 50%, 100% 150%, 50% 150%);}
}
@keyframes clip4{
  0%{clip-path: polygon(150% -150%, 200% -150%, 300% -50%, 250% -50%);}
  100%{clip-path: polygon(-100% 50%, -50% 50%, 50% 150%, 0% 150%);}
}
.clip{
    filter:grayscale(0);
    position: fixed;
    width:100%;
    height:100%;
    background: url("https://static.tildacdn.com/tild6635-3762-4338-b830-333064646439/giphy.jpg") no-repeat center;
    transform-origin:center;
}
#clip1 { animation:clip1 4s linear infinite; }
#clipa {
    transform: scale(1.1,1.1);
    animation:clipa 9s linear infinite;  
}
#clip2 {
    transform: scale(1.12,1.12); 
    animation:clip2 5s linear infinite;  
}
#clipb {
    transform: scale(1.14,1.14);
    animation:clipb 4s linear infinite;  
}
#clip3 {
    transform: scale(1.15,1.15);
    animation:clip3 7s linear infinite;  
}
#clip4 {
    transform: scale(1.13,1.13);
    animation:clip4 6s linear infinite;  
}