JSFiddle - React, Tailwind, and code Playground

HTML

<h2>With bleedshield</h2>
<div class="container">
    <div class="bleedShield">
        <div class="layer layer1"></div>
        <div class="layer layer2"></div>
        <div class="layer layer3"></div>
    </div>
</div>
<h2>Without bleedshield</h2>
<div class="container">
    <div class="">
        <div class="layer layer1"></div>
        <div class="layer layer2"></div>
        <div class="layer layer3"></div>
    </div>
</div>

CSS

@-webkit-keyframes GoLayer1{
  0% {opacity:1;}
  50% {opacity:0;}
  100% {opacity:0;}
}
@-webkit-keyframes GoLayer2{
  0% {opacity:0;}
  50% {opacity:1;}
  100% {opacity:0;}
}
@-webkit-keyframes GoLayer3{
  0% {opacity:0;}
  50% {opacity:0;}
  100% {opacity:1;}
}

.layer1{
    background: -webkit-linear-gradient(bottom, rgb(43,70,94) 29%, rgb(194,41,41) 65%, rgb(155,171,38) 83%);
    -webkit-animation: GoLayer1 5s infinite;
}

.layer2{
    background: -webkit-linear-gradient(bottom, rgb(225,202,230) 29%, rgb(39,163,194) 65%, rgb(36,124,171) 83%);
    -webkit-animation: GoLayer2 5s infinite;

}
.layer3{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
    -webkit-animation: GoLayer3 5s infinite;
}

.layer,.bleedShield{
    position:absolute;
    width:200px;
    height:200px;
}
.container{
    width:220px;
    height:220px;
    position:relative;
    background:red;
}
.bleedShield{
    position:static;
    background:white;
    width:200px;
    height:200px;
}