我在CSS转换方面遇到问题，但在第一次运行时不起作用

Question

我是CSS的新手，我的过渡代码有问题，它只有在我第一次单击它，第一次单击它之后才起作用，它只是立即更改而没有任何效果（过渡）。

这是我的代码，有人可以帮我（解释），谢谢。

这是我的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

因为第一次没有定义任何term_meta值（默认值）以使转换有效，但是在第一次单击后设置了一个值，因此它将始终有效。换句话说，您无法从right值过渡到auto值（这是通过第一次单击完成的操作）。

只需添加默认值（px）即可使用：

right:0

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