我对 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

因为您第一次没有定义任何 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;
}

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

我对 CSS 转换有疑问，它在第一个运行上不起作用

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

html

css

css-transitions

我对 CSS 转换有疑问，它在第一个 运行 上不起作用

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

html

css

css-transitions

我对 CSS 转换有疑问，它在第一个运行上不起作用