翻译x在计时精度方面表现不正常

Question

初始状态：
内联排序的3张图片

动作状态：事件点击：右边的最后一个图像消失，其他图像向右移动取代它，最后显示新图像，

我不会解释整个实施，＆＃34;因为它有点复杂＆＃34; 。

任何方式一切正常，事件宽度变化工作顺利，但变换：translation（x，y），不考虑我在css中给出它的时间

＆＃13;

＆＃13;

  
       var LiveArray = [
       "https://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jp",
       "https://sachinchoolur.github.io/lightslider/img/cS-2.jpg"  ,  
       "https://sachinchoolur.github.io/lightslider/img/cS-3.jpg",
       "https://sachinchoolur.github.io/lightslider/img/cS-4.jpg",
       "https://sachinchoolur.github.io/lightslider/img/cS-5.jpg" ,
       "https://sachinchoolur.github.io/lightslider/img/cS-6.jpg",
       "https://sachinchoolur.github.io/lightslider/img/cS-7.jpg",
       "https://sachinchoolur.github.io/lightslider/img/cS-8.jpg"
       ];
       
       function Create_ImageElements(ArrayOfImages) {
            var stringBuilder = "";
            var ArrayOfHtmlImages = [];
            for (var i = 0 ; i < ArrayOfImages.length; i++) {
                var thisString = "<img src='" + ArrayOfImages[i] + "' id='Image" + i + "' class='hidden' alt='ImageNumber"+i+"'/>";
                ArrayOfHtmlImages[i] = thisString;
            }
            return ArrayOfHtmlImages;
        }

        function InitialDisplay(ArrayOfImages) {
            var ImageSlider = $("#ImageSlider");
            var ReadyImages = Create_ImageElements(ArrayOfImages);
            ImageSlider.append(ReadyImages[0] + ReadyImages[1] + ReadyImages[2]);
            ImageSlider.find("img").each(function () {
                $(this).removeClass('hidden');
            });
            $("#Image0").addClass("first");
            $("#Image1").addClass("second");
            $("#Image2").addClass("third");
        }
        

        $(document).ready(function () {
            InitialDisplay(LiveArray);
            FixImagesHeight(20);
        });
        
        function FixImagesHeight(percentage)
        {
            var documentHeight = $(document).height();
            var SliderHeight = (documentHeight * (percentage / 100))+"px";
            $("#ImageSlider").find("img").each(function () {
                $(this).css("height", SliderHeight);
            });
        }

      

        function MoveRight(ArrayOfImages) {
            //movement of third image
            var firstImg, secondImg, thirdImg;
            var ExistedID = GetExistedID();

            firstImg = ExistedID[0]; secondImg = ExistedID[1]; thirdImg = ExistedID[2];
            var lastIndex = GetLastIndex();
            //  alert("lastIndex is "+ lastIndex);
            var newIndex = 0;
            if (lastIndex != ArrayOfImages.length - 1) {
                newIndex = Number(lastIndex) + 1;
            }
            
            var widthis = $(".third").width();
            var counter = 0;
        
            $("#" + thirdImg).css({ "transform": "translate(23%,0px);" });
            $("#ImageSlider").find("#" + thirdImg).remove();

            $("#" + secondImg).css({ "transform": "translate(23%,0px)" });
            $("#" + secondImg).removeClass("second");
            $("#" + secondImg).addClass("third");

            $("#" + firstImg).css({ "transform": "translate(23%,0px)"});
            $("#" + firstImg).removeClass("first");
            $("#" + firstImg).addClass("second");

            var BuildedArray = Create_ImageElements(ArrayOfImages);
            var newImage = BuildedArray[newIndex];
            //alert(newImage);
            $("#ImageSlider").prepend(newImage).fadeIn();
            $("#Image" + newIndex).attr("class", " ");
            $("#Image" + newIndex).attr("class", "first");
            $("#ImageSlider").find("img").css("transform", "translate(0px,0px)");
        }

        //get the bigger Index
        function GetLastIndex() {
            var ExistedID = GetExistedID();
            var firstImg, secondImg, thirdImg;
            firstImg = ExistedID[0];
            secondImg = ExistedID[1];
            thirdImg = ExistedID[2];
            var lastIndex_thirdImg = thirdImg.substr(thirdImg.length - 1, thirdImg.length);
            var lastIndex_secondImg = secondImg.substr(secondImg.length - 1, secondImg.length);
            var lastIndex_firstImg = firstImg.substr(firstImg.length - 1, firstImg.length);
            var max = lastIndex_firstImg; 
            if (lastIndex_secondImg > max) { max = lastIndex_secondImg; }
            if (lastIndex_thirdImg > max) { max = lastIndex_thirdImg; }
            return max;
        }

        function GetExistedID() {
            var Indexes = [];
            $("#ImageSlider").children("img").each(function () {
                Indexes.push($(this).attr("id"));
            });
            return Indexes;
        }

        $("#right").click(function () {
            MoveRight(LiveArray);
        });

＆＃13;

 .first {
       position:relative;
       display:inline-block;
       width:23%;
       max-height:initial;
       min-height:initial;
        transition-duration: 5s;
        animation-duration:5s;
       /*Please focus here */
       }

       .second {
       position:relative;
       display:inline-block;
       width:42%;
       max-height:initial;
       animation-duration:5s;
      transition-duration: 5s;
     /*Please focus here */
     }
       .third{
       position:relative;
       display:inline-block;
       width:23%; 
       max-height:initial;
       min-height:initial;
       animation-duration:5s;
      transition-duration: 5s;
     /*Please focus here */
       }
       .hidden {
       display:none;
       }

       #ImageSlider {
       max-height:20% !important;
       }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <form id="form1" runat="server">
    <div>
        <div id="ImageSlider"></div>
    </div>
        <p id="right" >RIGHT</p>
        </form>

＆＃13;

＆＃13;

＆＃13;