javascript slider sorunu yardım

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" />
<input type="button" class="iki" value="2" />
<input type="button" class="uc" value="3" />

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";
}

}

Kodların eksik mi acaba? Altta js kodu da vermişsin ama butonları onclick ile js fonksiyonuna  bağlamamışsın. Resimler, @keyframes ile kayıyor. Javascriptin orda hiçbir etkisi yok...

butonları javascript fonksiyonuna bağladım ama olmadı siz aynı kodları buraya yazıp gönderip buraya atsanız olmazmı ? hiç olmazsa herkes faydalansın kodlar bu tekrar atıyorum:

Html:

<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:0px;}

50%{ left:0px;}

75%{ left:0px;}

90%{ left:0px;}       
       
        }

javascript:

function birincisi(){
       

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

kutu.animationName="bir";
kutu.animationDuration="5s";
kutu.animationTimingFunction="ease";
kutu.animationIterationCount="infinite";
kutu.animationDirection="normal";

}