CSS Animation: Why is one keyframe skipped?
<p>I've got this picture slideshow made with CSS keyframes. </p>

<p>Here is everything fine:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
  &lt;img width="640" height="420" src="http://placehold.it/640/ff0000" alt="pict" /&gt;
  &lt;img width="640" height="420" src="http://placehold.it/640/00ff00" alt="pict" /&gt;
  &lt;img width="640" height="420" src="http://placehold.it/640/0000ff" alt="pict" /&gt;
  &lt;img width="640" height="420" src="http://placehold.it/640/ff00ff" alt="pict" /&gt;
  &lt;img width="640" height="420" src="http://placehold.it/640/00ffff" alt="pict" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The cyan image (00ffff) disappears and the red image (ff0000) appears <strong>at once.</strong> There is no transition between the two.</p>

<p>But it is only therefore fine because I've got that additional keyframe. ...</p>

<pre><code>...
20.1% {
    opacity: 1.0; 
}
...
</code></pre>

<p>... in there. </p>

<p>I've one removes that keyframe then the behavior starts to change: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
  &lt;img width="640" height="420" src="http://placehold.it/640/ff0000" alt="pict" /&gt;
  &lt;img width="640" height="420" src="http://placehold.it/640/00ff00" alt="pict" /&gt;
  &lt;img width="640" height="420" src="http://placehold.it/640/0000ff" alt="pict" /&gt;
  &lt;img width="640" height="420" src="http://placehold.it/640/ff00ff" alt="pict" /&gt;
  &lt;img width="640" height="420" src="http://placehold.it/640/00ffff" alt="pict" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>One can see that the first image (the red one (ff00000) is almost skipped. 
The cyan image appears. Then there a transition of some grey-cyan. Then the green image (00ff00) appears.</p>

<p><strong>What's the reason for that behavior?</strong></p>

<p>What happens there?</p>