我的 CSS 过渡有问题，它在第一次运行时不起作用答案

【问题标题】：I have problem with CSS transition, it doesn't work on the first run我的 CSS 过渡有问题，它在第一次运行时不起作用
【发布时间】：2019-02-09 15:59:36
【问题描述】：

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

【问题讨论】：

标签： html css css-transitions

【解决方案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>

【讨论】：