JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
    <div class="img">
        <div class="bg" style="
            background: url(http://picsum.photos/1200/900) no-repeat;
            background-size: cover;
            background-position: center;
        "></div>
    </div>
    <div class="back"style="
            background: url(http://picsum.photos/1300/900) no-repeat;
            background-size: cover;
            background-position: center;
        "></div>
</div>

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
div.box {
    width: 100vw;
    height: 100vh;
    border: 1px dashed black;
    position: relative;
    overflow: hidden;
}
div.img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px dashed red;
    background: yellow;
    animation: a 1.2s cubic-bezier(0.67, 0, 0.07, 0.99) infinite 1s;
    overflow: hidden;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    z-index: 2;
}
div.back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px dashed red;
    background: yellow;
    overflow: hidden;
}
div.bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: b 1.2s cubic-bezier(0.67, 0, 0.07, 0.99) infinite 1s;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
@keyframes a {
    100% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transform: scale(1.1) translateY(10%)}
}
@keyframes b {
    100% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); 
transform: scale(1.1) translateY(10%)}
}