javascript slider sorunu

selamlar öncelikle javascript ile bir basit slider yapayım dedim css özelliklerindende faydalandım sorunum şu resimler gayet güzel birşekilde animasyonlu çalışıyor fakat butona bastığımda birinci resim butonuna bastığımda birinci resim geliyor fakat butona bir daha basınca olmuyor yani butona birkere basınca resim 1. inci resme geliyor butonun sınırsız çalışması lazım normalde acaba neden olmuyor birtürlü anlamadım butonun sınırsız çalışması için ne yapmam gerekiyor bi açıklarsanız sevinirim kodları buraya paylaşıyorum bu konuda yardımlarınızı bekliyorum..

<div class="ana">
<div class="kutu">

<img src="file:///D|/web/foto arşivi/7n (3).jpg" class="resimbir" />
<img src="file:///D|/web/foto arşivi/7n (4).jpg" class="resimiki" />
<img src="file:///D|/web/foto arşivi/7n (5).jpg" class="resimuc" />
</div>

</div>
<br />
<input type="button" class="bir" value="1" onclick="birincisi()" />
<input type="button" class="iki" value="2" onclick="ikincisi()" />
<input type="button" class="uc" value="3" onclick="ucuncusu()" />

css:

.ana{
width:250px;
height:250px;

border:1px solid;
overflow:hidden;
position:relative;}

.kutu {
width:750px;
height:250px;
border:1px solid;
position:absolute;
animation-name:hareket;
animation-direction:normal;
animation-duration:3s;
animation-iteration-count:infinite;
animation-timing-function:ease;}



.resimbir,.resimiki,.resimuc {
width:250px;
height:250px;

float:left;}





@keyframes hareket{

0%{ left:0px;}

25%{ left:-250px;}

50%{ left:-250px;}

75%{ left:-500px;}

90%{ left:-500px;}

}

@keyframes bir{

0%{ left:0px;}

25%{ left:-250px;}

50%{ left:-250px;}

75%{ left:-500px;}

90%{ left:-500px;}

}

javascript:

function birincisi(x){


kutu = document.getElementsByClassName('kutu')[0].style;

kutu.animationName="bir";
kutu.animationDuration="3s";
kutu.animationTimingFunction="ease";
kutu.animationIterationCount="1";

if(kutu.left == "-250px"){
kutu.left="0px";
}

else if( kutu.left == "-500px"){

kutu.left="0px";
}

}