trouble about image slider html CSS - html

Question

dudes.
have made my image slider, but the first click doesn’t trigger an animation. It just jumps to the target. I want to smoothly changing of picture, but the firs just jump.
To understand my question better, go to
http://labs.qnimate.com/slider/#slider-image-3 and pay attention to animation between images.
here is html-code:
<div class="slider-holder">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-holder">
<img src="images/slide1.jpg" class="slider-image" />
<img src="images/slide2.jpg" class="slider-image" />
<img src="images/slide3.jpg" class="slider-image" />
</div>
<div class="button-holder">
</div>
</div>
and here is CSS:
.slider-holder
{
width: 800px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder
{
width: 2400px;
background-color: red;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slider-image
{
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slider-image-1:target ~ .image-holder
{
left: 0px;
}
#slider-image-2:target ~ .image-holder
{
left: -800px;
}
#slider-image-3:target ~ .image-holder
{
left: -1600px;
}
.button-holder
{
position: relative;
top: -20px;
}
.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}
Is there a way to fix that?
Than for all of you for helping me.

Answer 1

Change this bit:
#slider-image-1:target ~ .image-holder {
left: 0px;
}
to
#slider-image-1 ~ .image-holder {
left: 0px;
}

Answer 2

Here is given image width and second image width added. you check your image width and change as per your images. Given demo is working correct