Getting css pseudo elements :before & :after to stack behind a parent div with a background image

Question

I've tried all the existing answers on StackOverflow, they don't appear to work in this instance, it may be my error but I believe the keyframe animation complicates or blocks setting the stacking order on the pseudo elements so they stubbornly refuse to appear below their parent elements background image.

I'm trying to get a CSS rosette shape to spin, have the rosette's ribbons flap down and the award show on the rosette.

As you can see I've tried setting the parent's z-index: 1, and the pseudo elements z-index: -1. To no avail. I've tried changing the css from ids to classes. I've tried applying transform: translateZ(-1px); to the pseudo elements, to no result.

I need the ::after & ::before selectors to show behind their div container & it's image background. I'd love some help.

       <style>
      #box {
        z-index: 10;
        position: relative;
        background-color: crimson;
        height: 100vh;
        width: 100vw;
        animation: rosette 5s;
        animation-fill-mode: forwards;
        content: "";
      }

     @keyframes rosette {      
      95%{position: relative;
      background: crimson;
      height: 100px;
      width: 100px;
      border-radius: 50px;
      transform: rotateY(1turn);
    }
      100%{
      position: relative;
      background: crimson;
      height: 100px;
      width: 100px;
      border-radius: 50px;
      transform: rotateY(2turn);
      background: url(http://pottertour.co.uk/imagesAwards/AWARD-LUX-life-gold-wreath-min.png);
      background-size: cover;
      z-index: 1;
    }
  }
    #box:before{content: ""; animation: beforeBox 5s; animation-fill-mode: forwards;z-index: -1;}
    #box:after{content: ""; animation: afterBox 5s; animation-fill-mode: forwards;z-index: -1;}


    @keyframes beforeBox {
      97% {
        content: '';
      position: absolute;
      border-bottom: 0px solid crimson;
      border-left: 0px solid transparent;
      border-right: 0px solid transparent;
      top: 0px;
      left: 0px;
      transform: rotate(0deg);
    }
      100%{
      content: '';
      position: absolute;
      border-bottom: 70px solid crimson;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
      top: 70px;
      left: -10px;
      transform: rotate(-140deg);
      z-index: -1;
      }
    }

    @keyframes afterBox {
      97% {
      content: '';
      position: absolute;
      border-bottom: 0px solid crimson;
      border-left: 0px solid transparent;
      border-right: 0px solid transparent;
      top: 0px;
      left: auto;
      right: 0px;
      transform: rotate(0deg);
      }
      100%{
      content: '';
      position: absolute;
      border-bottom: 70px solid crimson;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
      top: 70px;
      left: auto;
      right: -10px;
      transform: rotate(140deg);
      z-index: -1;
    }
    }
</style>

Here's the HTML:

<div id="container">
       <div id="box"></div>
</div>