J'ai un problème avec la transition CSS, elle ne fonctionne pas au premier passage.

Question

Je suis nouveau dans les CSS, j'ai un problème avec mon code de transition, il ne fonctionne qu'après la première fois que je clique dessus, la première fois que je clique dessus, il a juste changé instantanément sans effet (transition).

Voici mon code, quelqu'un peut-il m'aider (expliquer), merci.

Voici mon code CSS :

.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

Parce que la première fois que vous n'avez pas de right (une valeur par défaut) pour que la transition fonctionne, mais après le premier clic, vous définissez une valeur pour que la transition fonctionne toujours. En d'autres termes, vous ne pouvez pas avoir une transition de auto à la valeur px (c'est ce qui est fait par le premier clic).

Il suffit d'ajouter une valeur par défaut ( right:0 ) et cela fonctionnera :

.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>