如何正确设置CSS动画速度，包括z-index

Question

需要更改依赖CSS关键帧动画和z-index的幻灯片的动画速度。示例代码

通过不同地设置时间属性尝试了明显的更改，但不喜欢结果。对类似情况进行了大量研究，并查看了关键帧CSS文档。

.picone,
.pictwo,
.picthree,
.picfour,
.picfive,
.picsix {
  height: 800px;
  width: 100%;
  position: absolute;
  background-size: cover;
  z-index: 1;
}


/*KEYFRAME ANIMATIONS */

@keyframes picone {
  0% {
    z-index: -1;
  }
  20% {
    z-index: -6;
  }
  40% {
    z-index: -5;
  }
  60% {
    z-index: -4;
  }
  80% {
    z-index: -3;
  }
  100% {
    z-index: -2;
  }
}

.picone {
  animation: picone 10s linear infinite;
}

@keyframes pictwo {
  0% {
    z-index: -2;
  }
  20% {
    z-index: -1;
  }
  40% {
    z-index: -6;
  }
  60% {
    z-index: -5;
  }
  80% {
    z-index: -4;
  }
  100% {
    z-index: -3;
  }
}

.pictwo {
  animation: pictwo 10s linear infinite;
}

<!-- homepage hero loop -->
<div class="picone"><img src="https://www.website.org/wp-content/uploads/2019/03/pic1[dot]jpg">
</div>
<div class="pictwo"><img src="https://www.website.org/wp-content/uploads/2019/03/pic2[dot]jpg">
</div>

易怒的幻灯片显示，它以随机的速度为图片设置动画。