CSS伪：目标元素动画不适用于滑块

Question

我正在尝试构建一个简单的css滑块，该滑块在处于：target状态时显示特定文本。文本实际上看起来很好，但发生的事情是它只是出现而不是滑入。我离开了：0设置在父级上，并且想法是当选择幻灯片ID时，父级应该移动到左：-100％/ - 200％/ - 300％，具体取决于目标幻灯片。希望这是有道理的，标记在下面。

感谢我出错的任何建议。

＆＃13;

＆＃13;

.slider__wrapper {
  width: 300px;
  margin: 50px auto 0 auto;
}

.slider {
  position: relative;
  overflow: hidden;
}

.slider__inner {
  position: relative;
  width: 300%;
  left: 0;
  transition: all .6s;
}

.slider__slides {
  float: left;
  width: 33.333%;
  font-size: 25px;
}

.slider__toggle {
  display: inline-block;
  margin-right: 10px;
  margin-top: 20px;
  font-size: 16px;
}

#slide--1 {
  background: red;
}

#slide--2 {
  background: yellow;
}

#slide--3 {
  background: green;
}

#slide--1:target~.slider__inner {
  left: 0;
  transition: all .6s;
}

#slide--2:target~.slider__inner {
  left: -100%;
  transition: all .6s;
}

#slide--3:target~.slider__inner {
  left: -200%;
  transition: all .6s;
}

＆＃13;

<div class="slider__wrapper">
  <div class="slider">
    <div class="slider__inner">
      <div class="slider__slides" id="slide--1">
        slide 1
      </div>
      <div class="slider__slides" id="slide--2">
        slide 2
      </div>
      <div class="slider__slides" id="slide--3">
        slide 3
      </div>
    </div>
  </div>
  <div class="slider__toggle">
    <a href="#slide--1">01</a>
    <a href="#slide--2">02</a>
    <a href="#slide--3">03</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;