Z-index and Animation

by Jonathan Fernandez

HTML

<div id="has-transparent-bg">
 <img src="http://i.imgur.com/eWtfMME.png">
 <div id="background-decoration-A"></div>
 <div id="content">
   Some Content Etc Lorem Message
 </div>
</div>

<!-- 
I know I can add an extra tag, but I want an answer to 
the question regarding the animation keyframe affecting z-index.

<div id="bg"></div>
#bg {
  background-color: rgba(0,0,0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
} -->

CSS

@keyframes rotate {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#has-transparent-bg {
  background-color: rgba(0,0,0, 0.5);
  width: 500px;
  height: 500px;
  position: relative;
  animation-duration: 5s;
  animation-name: fade-in;
}

#content {
  padding: 150px;
  font-size: 24px;
  color: #fff
}



#has-transparent-bg img {
  object-fit: cover;
  display: block;
  border: 12px solid #f7f7f7;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
}

#has-transparent-bg #background-decoration-A  {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  animation: 5s rotate infinite linear;
  

  background-size: 80%;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20fill%3D%22%23FFFFFF%22%20width%3D%22100pt%22%20height%3D%22100pt%22%20version%3D%221.1%22%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%3Cpath%20d%3D%22m80.289%2023.406c-2.6602%209.8125-8.3711%2016.336-17.074%2019.453%202.1289-20.668%2015.902-28.473%2029.68-34.281-20.34-1.6875-38.531%204.3398-53.375%2020.863%200.058594-6.7461%202.8477-11.738%208.0156-15.199-15.734%202.1445-23.934%2011.883-27.629%2026.16-2.1953-3.0781-2.6055-6.7891-1.7344-10.953%200%200-13.746%2016.891-10.477%2035.605%202.2422%2012.84%2012.715%2022.176%2024.848%2025.164%207.1758%201.7695%2015.195%201.3516%2022.105-1.4023%2016.062-6.3984%2023.301-25.633%2023.301-25.633-2.9766%203.1055-6.3867%204.5703-10.23%204.4023%2010.422-11.996%2013.711-27.117%2012.57-44.18z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
}