How to fix flickering from css keyframe animation

I am trying to stagger the opacity (fade) of three boxes via an infinite keyframe animation and the animation-delay property.

I am getting some unexpected behavior, as the third box fades away, it suddenly reappears faintly ("flickers") before the animation starts again. I am experiencing this across browsers.

I would like to use pseudo elements if possible, is there a known fix for this keyframe bug?

HTML

<div class="container">
   <div class="child">  
   <div></div> 
    </div>
</div>

SCSS

.container {
     position: fixed;
     left: 150px;
     top: 50px;

.child {
     position: absolute;
     animation:mymove 1s infinite;

     &::before{
         display: block;
         position: absolute;
         width: 25px;
         height: 25px;
         background-color: red;
         content: "";
         right: 40px;
         animation: inherit;
         animation-delay: .15s;
    }

    div {
        width: 25px;
        height: 25px;
        background-color: red;
        animation: inherit;
        animation-delay: .30s;
     }

     &::after{
         display: block;
        position: absolute;
        width: 25px;
        height: 25px;
        background-color: red;
        content: "";
        left: 40px;
        bottom: 0px;
        animation: inherit;
        animation-delay: .45s;
       }
   }
}

 @keyframes mymove {
      0% {
      opacity: 1;
    }

      100% {
        opacity: 0;
  }
}

JS Fiddle