title: CSS3 Keyframe Animated opacity break z-index order
body: <p>I have some code in a JSFiddle here:</p>
  
  <p><a href="https://jsfiddle.net/hhn6r3zn/" rel="nofollow noreferrer">https://jsfiddle.net/hhn6r3zn/</a></p>
  
  <p>Basically I'm animating a div using CSS3 keyframes and I want the Image to be above it- but even when using z-index it is not working.</p>
  
  <p><img src="https://i.stack.imgur.com/ygC7L.png" alt="The wrapper is correctly behind the image, but the animated div is not"></p>
  
  <p>However when I stop changing the opacity it works:
  <a href="https://jsfiddle.net/ax1566b0/" rel="nofollow noreferrer">https://jsfiddle.net/ax1566b0/</a></p>
  
  <p><img src="https://i.stack.imgur.com/zbopg.png" alt="Opacity at 1 the image is working"></p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pulse {
      width: 32px;
      background: #1A4886;
      height: 12px;
      border-radius: 50%;
  }
  
  @keyframes twinkly {
      0% {opacity: 1; width:0px;margin-left:14px; height:0px;z-index:0;}
   
      100% {opacity: 0;z-index:0;}
  
  }
  
  .pulse {
      animation: twinkly 2s infinite;
   margin: auto;
   margin-top: -14px;
   z-index: 0;
  }
  
  .switch{
   width:50px;
   height:75px;
  }
  
  .pulse-wrapper{
   z-index:0;
      background:red;
  }
  .button-wrapper{
  z-index:1;
      padding-left:10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="switch"&gt;
         &lt;div class="button-wrapper"&gt;&lt;a type="button" class="btn"&gt;&lt;img src="http://toptix.com/wp-content/plugins/codecanyon-5586825-image-map-hotspot-wordpress-plugin-v1.2.5/img/icon1.png" /&gt;&lt;/a&gt;&lt;/div&gt;
         &lt;div class="pulse-wrapper"&gt;&lt;div class="pulse"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I get the opacity to animate whilst keeping it behind the image?</p>