javascript-同一动画在不同方向上花费的时间更长

我有一个图像滑块,它将转到下一个/上一个图像.
问题在于,当您单击上一个图像按钮时,动画要比单击下一个图像按钮时花费的时间更长,并且两者的动画都相同！您能告诉我为什么会这样吗？
JSfiddle：
http://jsfiddle.net/v6d16jza/
HTML：

<div id="slider">
            <div id="setas-navegacao" style="position:absolute;height:100%;width:100%;">
                <i class="sprite-slider_ant" style="z-index:1;position:absolute;left:1.7%;top:50%;color:#ffa500;font-size:15pt;"><</i>
                <i class="sprite-slider_prox" style="z-index:1;position:absolute;right:68.5%;top:50%;color:#ffa500;font-size:15pt;">></i>
            </div>
            <div class="slide slide_ativo" style="background-image:url('http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images-540x303.jpg');">

            </div>

            <div class="slide" style="background-image:url('http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg');">

            </div>

            <div class="slide" style="background-image:url('http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg');">

            </div>
        </div>

CSS：

html{
    overflow: hidden; 
    width:100%;
}
div#slider{
    position:relative;
    overflow: hidden; 
    width: 300%;
    height:300px;
}

.slide{
    position:relative;
    width:33.3%;
    height:100%;
    float:left;
    background-size: cover;
    -webkit-transform: translateZ(0);
    -webkit-transition: margin-left 0.9s ease-out;
    -moz-transition: margin-left 0.9s ease-out;
    -o-transition: margin-left 0.9s ease-out;
    transition: margin-left 0.9s ease-out;
}

jQuery的：

$(".sprite-slider_prox").on("click", function(){
    if($(".slide_ativo").next().is(".slide")){
        $(".slide_ativo").css("margin-left", "-100%").removeClass("slide_ativo").next().addClass("slide_ativo");
    }
});

$(".sprite-slider_ant").on("click", function(){
    if($(".slide_ativo").prev().is(".slide")){
        $(".slide_ativo").removeClass("slide_ativo").prev().css("margin-left", "0%").addClass("slide_ativo");
    }
});

解决方法:

您添加的边距超出了将图像向左移动所需的实际余量.

您可以查看Chrome检查器的情况,将鼠标悬停在更改时的图像上(将动画时间提高到更高的值会有所帮助).您会注意到,滑块开始向后移动之前的延迟是用来消除多余的空白的.

我记录了video的调试信息.

如果您更改：

.css("margin-left", "-100%")

至：

.css("margin-left", "-33.333%")

动画将正常工作(请参见fiddle)

另外,请注意,我必须删除html和body元素的内边距和边距,以实现正确的平移.