javascript - CSS3 Keyframe Animated opacity break z-index order -

i have code in jsfiddle here:

https://jsfiddle.net/hhn6r3zn/

basically i'm animating div using css3 keyframes , want image above it- when using z-index not working.

however when stop changing opacity works: https://jsfiddle.net/ax1566b0/

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;  }

<div class="switch">  						 <div class="button-wrapper"><a type="button" class="btn"><img src="http://toptix.com/wp-content/plugins/codecanyon-5586825-image-map-hotspot-wordpress-plugin-v1.2.5/img/icon1.png" /></a></div>  						 <div class="pulse-wrapper"><div class="pulse"></div></div>  </div>

how can opacity animate whilst keeping behind image?

for z-index property applied element's position must set other initial static https://css-tricks.com/almanac/properties/z/z-index/