Carousel transition time

Question

I have a simple carousel, horizontal transition. When I change speedof transition, everything works but When firt imagegoes to left side, it diappears sooner than second image slides to its position.

What am I missing here? What property does this?

@media not all, (-webkit-transform-3d)
.carousel-inner>.item {
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}
.carousel-inner>.item.next.left, .carousel-inner>.item.prev.right, .carousel-inner>.item.active {
 -webkit-transition: -webkit-transform 1s ease-in-out;
 transition: transform 1s ease-in-out;
 animation-fill-mode: both;
 -moz-transition: 1s ease-in-out left;
 -o-transition: 1s ease-in-out left;
}

<div class="wide-carousel">
                <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="4200">
        <div class="carousel-inner" role="listbox" style="min-height: 430px;">
                            <div class="item">
                    <img src="https://..." alt="3" width="1920" height="544">
                </div>
                            <div class="item">
                    <img src="https://..." alt="2" width="1920" height="544">

                    </div>           
            </div>

        </div>```

Thank you