CSS3关键帧动画不透明度中断z-index顺序

Question

我在JSFiddle中有一些代码：

https://jsfiddle.net/hhn6r3zn/

基本上我是使用CSS3关键帧制作div的动画，我希望Image高于它 - 但即使使用z-index也不行。

但是，当我停止更改不透明度时，它会起作用： https://jsfiddle.net/ax1566b0/

代码：

.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>

如何将不透明度设置为动画，同时将其保留在图像后面？

Answer 1

对于要应用的z-index属性，元素的位置必须设置为初始static以外的其他位置 https://css-tricks.com/almanac/properties/z/z-index/