当动画的一部分时，标签不会激活关联的字段

使用网络技术，我仅使用HTML和CSS（不使用Javascript）开发了一个骰子。这是一个简单的系统：一系列单选按钮和标签，它们通过更改其位置（带有z-index）来模拟骰子，因此每次单击骰子时，都会有一个“随机”数字。

这是代码的最低版本：

@keyframes changeOrder {
  from { z-index: 6;}
  to { z-index: 1; }
}

@-webkit-keyframes changeOrder {
  from { z-index: 6; }
  to { z-index: 1; }
}

label {
  display: block;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  line-height:50px;
  background: #eeeeee;
  text-align: center;
  animation: changeOrder 1.2s infinite;
}

label:nth-of-type(1) { animation-delay: 0s; }
label:nth-of-type(2) { animation-delay: -0.2s; }
label:nth-of-type(3) { animation-delay: -0.4s; }
label:nth-of-type(4) { animation-delay: -0.6s; }
label:nth-of-type(5) { animation-delay: -0.8s; }
label:nth-of-type(6) { animation-delay: -1.0s; }

1
2
3
4
5
6

label {
  display: block;
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  line-height:50px;
  background: #eeeeee;
  text-align: center;
}

label:active {
  background:red;
  z-index:-1;
}

1
2