CSS动画：为什么跳过一个关键帧？

Question

我用CSS关键帧制作了这张照片幻灯片。

一切都很好：

＆＃13;

＆＃13;

html,
body {
  height: 100%;
}
body {
  background: -webkit-linear-gradient(bottom left, white, #cdcdcd);
  background: linear-gradient(to top right, white, #cdcdcd);
}
.wrap {
  width: 800px;
  margin: 50px auto;
  position: relative;
  top: 0;
  left: 0;
}
img {
  position: absolute;
  border-radius: 8px;
  padding: 3px;
  border: solid 1px;
}
img:nth-of-type(1) {
  -webkit-animation: changeOpacity 10s infinite;
  animation: changeOpacity 10s infinite;
}
img:nth-of-type(2) {
  -webkit-animation: changeOpacity 10s 2s infinite;
  animation: changeOpacity 10s 2s infinite;
}
img:nth-of-type(3) {
  -webkit-animation: changeOpacity 10s 4s infinite;
  animation: changeOpacity 10s 4s infinite;
}
img:nth-of-type(4) {
  -webkit-animation: changeOpacity 10s 6s infinite;
  animation: changeOpacity 10s 6s infinite;
}
img:nth-of-type(5) {
  -webkit-animation: changeOpacity 10s 8s infinite;
  animation: changeOpacity 10s 8s infinite;
}
@-webkit-keyframes changeOpacity {
  0% {
    opacity: 1.0;
  }
  20% {
    opacity: 1.0;
  }
  20.1% {
    opacity: 0.0;
  }
  100% {
    opacity: 0.0;
  }
}
@keyframes changeOpacity {
  0% {
    opacity: 1.0;
  }
  20% {
    opacity: 1.0;
  }
  20.1% {
    opacity: 0.0;
  }
  100% {
    opacity: 0.0;
  }
}

＆＃13;

<div class="wrap">
  <img width="640" height="420" src="http://placehold.it/640/ff0000" alt="pict" />
  <img width="640" height="420" src="http://placehold.it/640/00ff00" alt="pict" />
  <img width="640" height="420" src="http://placehold.it/640/0000ff" alt="pict" />
  <img width="640" height="420" src="http://placehold.it/640/ff00ff" alt="pict" />
  <img width="640" height="420" src="http://placehold.it/640/00ffff" alt="pict" />
</div>

＆＃13;

＆＃13;

＆＃13;

青色图像（00ffff）消失，红色图像（ff0000）一次显示。两者之间没有过渡。

但它只是很好，因为我已经获得了额外的关键帧。 ...

...
20.1% {
    opacity: 1.0; 
}
...

......在那里。

我删除了该关键帧，然后行为开始改变：

＆＃13;

＆＃13;

html,
body {
  height: 100%;
}
body {
  background: -webkit-linear-gradient(bottom left, white, #cdcdcd);
  background: linear-gradient(to top right, white, #cdcdcd);
}
.wrap {
  width: 800px;
  margin: 50px auto;
  position: relative;
  top: 0;
  left: 0;
}
img {
  position: absolute;
  border-radius: 8px;
  padding: 3px;
  border: solid 1px;
}
img:nth-of-type(1) {
  -webkit-animation: changeOpacity 10s infinite;
  animation: changeOpacity 10s infinite;
}
img:nth-of-type(2) {
  -webkit-animation: changeOpacity 10s 2s infinite;
  animation: changeOpacity 10s 2s infinite;
}
img:nth-of-type(3) {
  -webkit-animation: changeOpacity 10s 4s infinite;
  animation: changeOpacity 10s 4s infinite;
}
img:nth-of-type(4) {
  -webkit-animation: changeOpacity 10s 6s infinite;
  animation: changeOpacity 10s 6s infinite;
}
img:nth-of-type(5) {
  -webkit-animation: changeOpacity 10s 8s infinite;
  animation: changeOpacity 10s 8s infinite;
}
@-webkit-keyframes changeOpacity {
  0% {
    opacity: 1.0;
  }
  20% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.0;
  }
}
@keyframes changeOpacity {
  0% {
    opacity: 1.0;
  }
  20% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.0;
  }
}

＆＃13;

<div class="wrap">
  <img width="640" height="420" src="http://placehold.it/640/ff0000" alt="pict" />
  <img width="640" height="420" src="http://placehold.it/640/00ff00" alt="pict" />
  <img width="640" height="420" src="http://placehold.it/640/0000ff" alt="pict" />
  <img width="640" height="420" src="http://placehold.it/640/ff00ff" alt="pict" />
  <img width="640" height="420" src="http://placehold.it/640/00ffff" alt="pict" />
</div>

＆＃13;

＆＃13;

＆＃13;

可以看到第一张图像（红色的一张（ff00000）几乎被跳过了。 出现青色图像。然后是一些灰青色的过渡。然后出现绿色图像（00ff00）。

这种行为的原因是什么？

那里会发生什么？