I have problem with CSS transition, it doesn't work on the first run

Question

I'm new to CSS, I have a problem with my transition code, it only works after the first time I click it, the first time I click it, it just changed instantly with no effect ( transition ).

Here is my code can some one help me ( explain ), Thank you.

This is my CSS code:

.holder {
  width: 400px;
  height: 400px;
  margin: auto;
  background-color: red;
  overflow: hidden;
  text-align: center;
}

.image-holder {
  width: 1200px;
  height: 400px;
  background-color: yellow;
  clear: both;
  position: relative;
  -o-transition: 5s;
  transition: 5s;
}

.button-holder {
  position: relative;
  top: -20px;
}

.button {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: brown;
}

.slider-image {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}

#change1:target~.image-holder {
  right: 0;
}

#change2:target~.image-holder {
  right: 400px;
}

#change3:target~.image-holder {
  right: 800px;
}

<div class="holder">
  <span id="change1"></span>
  <span id="change2"></span>
  <span id="change3"></span>
  <div class="image-holder">
    <img src="https://picsum.photos/400/400?image=1040" class="slider-image" alt="">
    <img src="https://picsum.photos/400/400?image=1041" class="slider-image" alt="">
    <img src="https://picsum.photos/400/400?image=1042" class="slider-image" alt="">
  </div>
  <div class="button-holder">
    <a href="#change1" class="button"></a>
    <a href="#change2" class="button"></a>
    <a href="#change3" class="button"></a>
  </div>
</div>

Answer 1

Because the first time you don't have any right value defined (a default one) in order to have the transition working but after the first click you set a value thus it will always work. In other words, you cannot have a transition from auto value to px value (this is what is done by the first click).

Simply add a default value (right:0) and it will work:

.holder {
  width: 400px;
  height: 400px;
  margin: auto auto;
  background-color: red;
  overflow: hidden;
  text-align: center;
}

.image-holder {
  width: 1200px;
  height: 400px;
  background-color: yellow;
  clear: both;
  position: relative;
  right: 0px;
  -o-transition: 5s;
  transition: 5s;
}

.button-holder {
  position: relative;
  top: -20px;
}

.button {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: brown;
}

.slider-image {
  float: left;
  margin: 0px;
  padding: 0px;
  position: relative;
}

#change1:target~.image-holder {
  right: 0px;
}

#change2:target~.image-holder {
  right: 400px;
}

#change3:target~.image-holder {
  right: 800px;
}

<div class="holder">

    <span id="change1"></span>
    <span id="change2"></span>
    <span id="change3"></span>

    <div class="image-holder">
      <img src="https://picsum.photos/400/400?image=1040"  class="slider-image" >
      <img src="https://picsum.photos/400/400?image=1041"  class="slider-image" >
      <img src="https://picsum.photos/400/400?image=1042"  class="slider-image" >
    </div>
    <div class="button-holder">
      <a href="#change1" class="button"></a>
      <a href="#change2" class="button"></a>
      <a href="#change3" class="button"></a>
    </div>

  </div>