CSS pseudo :target element animation not working on slider - html

Question

I am trying to build a simple css slider that shows specific text when in the :target state. The text actually appears fine but what's happening is it's just appearing instead of sliding in. I have left:0 set on the parent and the idea being that when the slide id is selected the parent should move to left: -100%/-200%/-300% depending on the slide targeted. Hope this makes sense, markup is below.
Appreciate any advice where I have gone wrong.
.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;
}
<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">
01
02
03
</div>
</div>