CSS Transition çalışmıyor

Merhaba. JavaScript kullanarak basit bir slayt yaptım kodları şu şekilde:
HTML:
<Div class="slider">
<Div class="img-box">
<İmg src="images/oda1.jpg" class="slider-img" />
<Button class="btn" onclick="prev()">Prev</button>
<Button class="btn" onclick="next()">Prev</button>
</Div>

JavaScript:
Var images = ["oda1.jpg", "oda2.jpg", "oda10.jpg"];
Var i = 0;
Function prev() {
İf (i <= 0) i = images. Length;
İ--;
Return setImg();
}
Function next() {
İf (i >= images. Length - 1) i = -1;
İ++;
Return setImg();
}
Function setImg() {
Return slider_img. Setattribute("src", "images/" + images);
}

CSS ile SLI'de classında transition veriyorum ama geçiş animasyonu olmuyor nasıl yapabilirim?