html - Why does first slideshow image click skip transition and go straight to image? -

in slideshow shown below, there 2 images available. once clicking on button second image after first opening page, there sudden jump image no 5 second transition expected. when doing this, notice #slideshowimage-2 shown in url (doing offline) after clicking button image. here's code below:

css:

.slideshowcontainer { width:800px; height:400px; margin-left:auto; margin-right:auto; margin-top:0px; text-align:center;     overflow:hidden; position:relative; top:30px; border-style:solid;     border-width:10px; border-color:white; border-radius:15px; }        .imagecontainer { width:1800px; height:400px; clear: both; position:relative; -webkit-transition:left 3s; -moz-transition:left 3s; -o-transition:left 3s; -ms-transition:left 3s; transition:left 3s; animation:scroller 16s infinite; }   @keyframes scroller { 0% {transform:translatex(0);} 31.25% {transform:translatex(0);} 50% {transform:translatex(-800px);}     81.25% {transform:translatex(-800px);}     100% {transform:translatex(0);} }   .slideshowimage { float:left;     margin:0px;     padding:0px;     position:relative; }   @keyframes change { 0% {     transform: translatex(-800px); } 100% {     transform: translatex(0);     animation: scroller 16s infinite; } }  @keyframes change2 { 0% {     transform: translatex(0); } 100% {     transform: translatex(-800px);     animation: scroller2 16s infinite; } }    #slideshowimage-1:target ~ .imagecontainer { animation: none; transform: translatex(0px); animation: change 3s forwards; }  #slideshowimage-2:target ~ .imagecontainer { animation: none; transform: translatex(-800px); animation: change2 3s forwards; }   .buttoncontainer { position:relative; top:-20px; }   .button { display:inline-block;     height:10px;     width:10px;     border-radius:10px;     background-color:darkgray; -webkit-transition:background-color 0.25s;     -moz-transition:background-color 0.25s;     -o-transition:background-color 0.25s; -ms-transition:background-color 0.25s;     transition:background-color 0.25s; }   .button:hover { background-color:gray; } 

html:

<div class="slideshowcontainer">   <span id="slideshowimage-1"></span>   <span id="slideshowimage-2"></span>   <span id="slideshowimage-3"></span>   <div class="imagecontainer">     <a href="#"><img src="webserviceslide.png" class="slideshowimage" style="width:800px;height:400px;"></a>     <a href="#"><img src="es-flag.png" class="slideshowimage" style="width:800px;height:400px;"></a>   </div>   <div class="buttoncontainer">     <a href="#slideshowimage-1" class="button"></a>     <a href="#slideshowimage-2" class="button"></a>   </div> </div> 

how make transition set upon clicking button occurs on first click? many in advance.

reason:-

because left , translatex both different. if apply left:-800px when slide @ translatex(-800px) (2nd slide) animation continue @ 2nd part of slideshow. thats why seeing blank white space(when translatex(-800px) accors when left:-800px).

solution:-

you either have use translatex or left. use same in places

part of code solved problem:-

@keyframes change {     0% {         transform: translatex(-800px);     }     100% {         transform: translatex(0);         animation: scroller 16s infinite;     } }  @keyframes change2 {     0% {         transform: translatex(0);     }     100% {         transform: translatex(-800px);         animation: scroller2 16s infinite;     } }  #slideshowimage-1:target ~ .imagecontainer {     animation: none;     transform: translatex(0px);     animation: change 3s forwards; }  #slideshowimage-2:target ~ .imagecontainer {     animation: none;     transform: translatex(-800px);     animation: change2 3s forwards; } 

explanation:-

this code doesn't translatex manually. instead uses animation scoll single time animation: change 3s forwards;

drawback:-

once click on slide selection button animation stops. have tried solve adding animation in change keyframes animate end section. unfortunately didn't work. suggest alternate method overcome drawback follows

to overcome drawback have added play button replay slideshow animation got paused slide button. (once click on play button takes little time slide have given 16s in animation)

demo:-

.slideshowcontainer {      width: 800px;      height: 400px;      margin-left: auto;      margin-right: auto;      margin-top: 0px;      text-align: center;      overflow: hidden;      position: relative;      top: 30px;      border-style: solid;      border-width: 10px;      border-color: white;      border-radius: 15px;  }    .imagecontainer {      width: 1800px;      height: 400px;      clear: both;      position: relative;      -webkit-transition: 3s;      -moz-transition: 3s;      -o-transition: 3s;      -ms-transition: 3s;      transition: 3s;      transform: translatex(0px);      animation: scroller 16s infinite;  }    @keyframes scroller {      0% {          transform: translatex(0);      }      31.25% {          transform: translatex(0);      }      50% {          transform: translatex(-800px);      }      81.25% {          transform: translatex(-800px);      }      100% {          transform: translatex(0);      }  }    @keyframes scroller2 {      0% {          transform: translatex(-800px);      }      31.25% {          transform: translatex(-800px);      }      50% {          transform: translatex(0);      }      81.25% {          transform: translatex(0);      }      100% {          transform: translatex(-800px);      }  }      @keyframes change {      0% {          transform: translatex(-800px);      }      100% {          transform: translatex(0);          animation: scroller 16s infinite;      }  }    @keyframes change2 {      0% {          transform: translatex(0);      }      100% {          transform: translatex(-800px);          animation: scroller2 16s infinite;      }  }    .slideshowimage {      float: left;      margin: 0px;      padding: 0px;      position: relative;  }    #slideshowimage-1:target ~ .imagecontainer {      animation: none;      transform: translatex(0px);      animation: change 3s forwards;  }    #slideshowimage-2:target ~ .imagecontainer {      animation: none;      transform: translatex(-800px);      animation: change2 3s forwards;  }    #slideshowimage-3:target ~ .imagecontainer {      transform: translatex(0);      animation: scroller 16s infinite;  }    .buttoncontainer {      position: relative;      top: -20px;  }    .button {      display: inline-block;      height: 10px;      width: 10px;      border-radius: 10px;      background-color: darkgray;      -webkit-transition: background-color 0.25s;      -moz-transition: background-color 0.25s;      -o-transition: background-color 0.25s;      -ms-transition: background-color 0.25s;      transition: background-color 0.25s;  }    .button:hover {      background-color: gray;  }    .buttonplay:after {      height: 0;      width: 0;      top: 0;      margin-left: 10px;      position: absolute;      content: ' ';      border-left: solid 13px darkgray;      border-top: solid 8px transparent;      border-bottom: solid 8px transparent;      }

<div class="slideshowcontainer">      <span id="slideshowimage-1"></span>      <span id="slideshowimage-2"></span>      <span id="slideshowimage-3"></span>          <div class="imagecontainer">              <a href="#"><img src="https://placehold.it/800x400" class="slideshowimage" style="width:800px;height:400px;"></a>              <a href="#"><img src="https://placehold.it/900x450" class="slideshowimage" style="width:800px;height:400px;"></a>          </div>          <div class="buttoncontainer">              <a href="#slideshowimage-1" class="button"></a>              <a href="#slideshowimage-2" class="button"></a>              <a href="#slideshowimage-3" class="buttonplay"></a>          </div>      </div>