Why does translate work immediately, and not within 1.5 seconds?

Question

css

Hello!
I'm making a carousel for a website. I use only pure JS, because I recently went through a book from HeadFirst "Learn to Program in JavaScript" and I want to consolidate my skills before learning libraries.
Here is a link to the sandbox:
1) I did it through the transition property (the picture does not move within 1.5 seconds, but immediately):
http://codepen.io/RRodionov/pen/VeYGgO/
2) I did it through the left property:
codepen.io/ RRodionov/pen/GogwoO
My carousel works like this:
1) We create an elemObj object that remembers:
a) the element that is currently displayed
b) the next element
c) the previous element
2) We remove all classes from the elements stored in the elemObj object.
3) Check which arrow was pressed (left or right).
4) Add classes to elements.
The elemObj object is created correctly, classes are removed from the elements, the arrow is checked, classes are added.
Previously, instead of translate in css, I used left and everything worked. But the transitions were displayed jerkily and neighboring elements twitched.
I decided to change it to translate.
The current picture is shifted to the left or right, depending on the pressed arrow.
But the next picture appears in place of the current one immediately, without animation.
There are 3 pictures:

<img class="carousel" style="display: block;"  src="images/backgr(small)0.jpg" alt="bg">
    <img class="carousel" style="display: none;" src="images/backgr(small)1.jpg" alt="bg">
    <img class="carousel" style="display: none;"  src="images/backgr(small)2.jpg" alt="bg">

Styles:

img.carousel {
  z-index: 0;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0px;
  transition: 1.5s;
}
.carousel-left-animation {
  transform: translate(-100vw);
}

.carousel-right-animation {
  transform: translate(100vw);
}

.carousel-back-animation {
  left: 100vw!important;
  transform: translate(-100vw);
}

And JS:

var imgs = document.getElementsByClassName('carousel');
carousel(side, imgs);

/*Main function*/
function carousel(side, elem) {
               /*Создает обьект elemObj, который запоминает 
                 1)элемент, отображающийся сейчас 
                 2)следующий элемент 
                 3)предыдущий элемент
              */
    var elemObj = checkCourse(elem, checkDisplayBlock); 

              /*Удаляет все классы из элементов, хранящихся в объекте elemObj */
    resetAnimation(elemObj, 'carousel-left-animation', 'carousel-right-animation', 'carousel-back-animation');
             
             /*Проверяет, какая стрелка была нажата(левая или правая). Запускает функцию carouselAnimation(), которая добавляет классы к элементам*/
    checkSide(side, elemObj);
    return;
}

/*Создает обьект elemObj*/
function checkCourse(elem, condition) {
  for (var i = 0; i < elem.length; i++) {
      if (condition(elem[i]) === true) {
        var currentElem = elem[i];
        var elemObj = {
        currentElem: elem[i]
      }
      if (i >= (elem.length - 1)) {
          elemObj.prevElem = elem[i - 1];
          elemObj.nextElem = elem[0];
      }	else if (i <= 0) {
          elemObj.prevElem = elem[2];
          elemObj.nextElem = elem[i + 1];
      }	else {
          elemObj.nextElem = elem[i + 1];
          elemObj.prevElem = elem[i - 1];
      }
      return elemObj;
    }
  }
}

/*Check "display: block"*/
function checkDisplayBlock(elem) {
  var elemDisplay = elem.style.display;
  return elemDisplay === 'block';
}

/*Проверяет сторону*/
function checkSide(side, elemObj, obj) {
  if (side == 'left') {
    carouselAnimation(obj, elemObj, elemObj.nextElem, 'left', 'nextImg');
  }	else {
    carouselAnimation(obj, elemObj, elemObj.prevElem, 'right', 'prevImg');
  }
}

/*Добавляет класс*/
function carouselAnimation(obj, elemObj, courseElem, side, courseClass) {
  elemObj.currentElem.classList.add('carousel-' + side + '-animation');
  courseElem.style.display = 'block';
  courseElem.classList.add('carousel-back-animation');
  setTimeout(function(){elemObj.currentElem.style.display = 'none';}, 1500);
}

/*Удаляет классы*/
function resetAnimation(elemObj, class1, class2, class3, class4, class5) {
  elemObj.currentElem.classList.remove(class1, class2, class3, class4, class5);
  elemObj.nextElem.classList.remove(class1, class2, class3, class4, class5);
  elemObj.prevElem.classList.remove(class1, class2, class3, class4, class5);								
}

Answer 1

Sooner or later, every developer must make a choice:
1) codepen.io
2) jsfiddle.net
There will be many more answers. And so I inserted your code - I have no arrows, nothing. As a result, you don't even want to waste your time.

Answer 2

I didn’t really understand the code, but I immediately saw 2 things that will not give smoothness:
1) transition: 1.5s; the property that you want to animate is not specified, but just the time is specified, and it is desirable to specify the type of animation (linear, ease, etc.)
2) images are set to display: none; and transition here won't help in smoothly switching to display: block; and it will happen abruptly