title: z-index issues with CSS animation
body: <p>First time posting here, have long used the site as a resource for any problems I come across but for the first time I haven't been able to fix my code using previous answers. </p>
  
  <p>There's probably a very simple answer for what I'm asking and I'm just missing something.</p>
  
  <p>I am trying to create a snippet that I can use in a production site soon. I want to create an image "frame" that sits around an image. I also then want this frame to be animated and swing from side to side.</p>
  
  <p>Before I insert the animation code, the code is as below, and works perfectly (the frame is above the image).</p>
  
  <pre><code>.frame {
      margin-top: 5rem;
      margin-left: 35%;
      display: inline-flex;
      background-image: url(http://www.studiopastimes.info/tester/images/frame.svg);
      background-repeat: no-repeat;
      z-index: 1000;
      padding: 3rem;
      box-sizing: border-box;
  }
  .internal-frame {
      position: relative;
      width: 400px;
      z-index:-5;
  }
  .internal-frame img {
      width: 100%;
  }
  </code></pre>
  
  <p>However, when I add the animation code, this breaks the z-index.</p>
  
  <pre><code>@-webkit-keyframes swinging{
      0%{-webkit-transform: rotate(10deg);}
      33%{-webkit-transform: rotate(-5deg);}
      66%{-webkit-transform: rotate(10deg);}
      100%{-webkit-transform: rotate(-5deg);}
  }
  
  @keyframes swinging{
      0%{-webkit-transform: rotate(10deg);}
      33%{-webkit-transform: rotate(-5deg);}
      66%{-webkit-transform: rotate(10deg);}
      100%{-webkit-transform: rotate(-5deg);}
  }
  
  .swingimage{
      -webkit-transform-origin: 50% 0;
      transform-origin: 50% 0;
      -webkit-animation: swinging 5s ease-in-out ;
      animation: swinging 5s ease-in-out ;
      animation-fill-mode: forwards;
      backface-visibility: hidden;
  }
  </code></pre>
  
  <p>This can all be seen in the Codepen here: <a href="https://codepen.io/anon/pen/RMrrWB" rel="nofollow noreferrer">https://codepen.io/anon/pen/RMrrWB</a></p>
  
  <p>Any idea how I can get the CSS animation to work, whist still having the frame above the image? I understand from my research there issues with CSS animations and z-index, but I couldn't get any of the suggested fixes to work. Any help would be great and if there's any issues with how I have asked this question please let me know!</p>
  
  <p>Thanks</p>