title: Lag in CSS3 animation
body: <p>Alright, I am trying to make a pure CSS3 image slideshow. (Yes, I know it could be done with JQuery easier.) I cannot get it to work on my browser, chrome, so I have not yet added the syntax for the other browsers. </p>
  
  <p>My HTML is...</p>
  
  <pre><code>            &lt;div class="slide-show"&gt;
                  &lt;img src="pictures/slide-1.jpg" alt="Broken Earth" class="slide-1"/&gt;
                  &lt;img src="pictures/slide-2.jpg" alt="World Map" class="slide-2"/&gt;
                  &lt;img src="pictures/slide-3.jpg" alt="Sunset" class="slide-3"/&gt;
                  &lt;img src="pictures/slide-4.jpg" alt="Ursumian Flag" class="slide-4"/&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS is...</p>
  
  <pre><code>.slide-show {
  
      border-style: solid;
      border-width: 3px;
      border-color: #746d27;
      overflow: visible;
      width: 600px;
      height: 300px;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      top: 30px;
  
  }
  
  .slide-1 {
  
      position: relative;
      -webkit-animation-name: one;
      -webkit-animation-duration: 20s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-play-state: running;
      width: 600px;
      height: 300px;
  
  }
  
  .slide-2 {
  
      position: relative;
      -webkit-animation-name: two;
      -webkit-animation-duration: 20s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-play-state: running;
      width: 600px;
      height: 300px;
  
  }
  
  .slide-3 {
  
      position: relative;
      -webkit-animation-name: three;
      -webkit-animation-duration: 20s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-play-state: running;
      width: 600px;
      height: 300px;
  
  }
  
  .slide-4 {
  
      position: relative;
      -webkit-animation-name: four;
      -webkit-animation-duration: 20s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-play-state: running;
      width: 600px;
      height: 300px;
  
  }
  
  @-webkit-keyframes one {
  
      0%   {left: 0px; top: 0px;}
      15%  {left: 0px; top: 0px;}
      20%  {left: 600px; top: 0px;}
      21%  {left: 600px; top: 300px;}
      22%  {left: -600px; top: 300px;}
      23%  {left: -600px; top: 0px;}
      95%  {left: -600px; top: 0px;}
      100% {left: 0px; top: 0px;}
  
  }
  
  @-webkit-keyframes two {
  
      0%   {left: -600px; top: -305px;}
      15%   {left: -600px; top: -305px;}
      20%   {left: 0px; top: -305px;}
      35%   {left: 0px; top: -305px;}
      40%   {left: 600px; top: -305px;}
      41%   {left: 600px; top: -5px;}
      42%   {left: -600px; top: -5px;}
      43%   {left: -600px; top: -305px;}
      100%   {left: -600px; top: -305px;}
  
  }
  
  @-webkit-keyframes three {
  
      0%   {left: -600px; top: -610px;}
      35%   {left: -600px; top: -610px;}
      40%   {left: 0px; top: -610px;}
      55%   {left: 0px; top: -610px;}
      60%   {left: 600px; top: -610px;}
      61%   {left: 600px; top: -310px;}
      62%   {left: -600px; top: -310px;}
      63%   {left: -600px; top: -610px;}
      100%   {left: -600px; top: -610px;}
  
  }
  
  @-webkit-keyframes four {
  
      0%   {left: -600px; top: -915px;}
      55%   {left: -600px; top: -915px;}
      60%   {left: 0px; top: -915px;}
      75%   {left: 0px; top: -915px;}
      80%   {left: 600px; top: -915px;}
      81%   {left: 600px; top: -615px;}
      82%   {left: -600px; top: -615px;}
      83%   {left: -600px; top: -915px;}
      100%   {left: -600px; top: -915px;}
  
  }
  </code></pre>
  
  <p>Notice, the "slide-show" class does have "overflow" set to "visible." This is so I can make sure all the images are shifting properly. When they do, that will be switched to "hidden." There are 4 pictures, and each should only be moving in/out of the stage for 2 seconds total, and each should spend 3 seconds total sitting in the stage. Why do I have a lag in the last slide?</p>