Javascript jquery动画无法在safari和chrome中正常工作

嗨，我有一个表格和一些步骤。我在每一级注册上设置步骤编号的动画。我的动画在firefox中运行良好，但在chrome和safari中不支持。这是因为css属性

左
。下面是我的代码，你可以检查

这里是html部分

<div class="steps">
        <p class="step1 active"><b>01</b></p>
        <p class="step2"><b>02</b></p>
        <p class="step3"><b>03</b></p>
        <p class="step4"><b>04</b></p>
        <p class="step5"><b>05</b></p>
    </div>

这里是jQuery部分

$(document).ready(function (){
    $(".step1").css("left","auto").animate({"right":"0px"}, "slow");
    $(".step2").animate({"left":"0px"}, "slow");
    $(".step3").animate({"left":"60px"}, "slow");
    $(".step4").animate({"left":"120px"}, "slow");
    $(".step5").animate({"left":"180px"}, "slow");
});

对第一个元素稍作调整：

.steps .step1{right: 100%; margin-right: -60px;}

JS:


第2版：

好吧，再次为愚蠢的旅行修好

.steps .step1{ margin-right: 100%; right: -60px;}

这是唯一的改变

这不管用吗？否。步骤1也应该从左到右设置动画。因为在css中，左边是0px，应该改为右边：0px唯一的问题是，如果您在本地firefox浏览器上查看，它会立即移动，您将看到buggy safari的实际动画添加修复。
$(document).ready(function (){
    $(".step1").animate({"right":"0px", 'marginRight': 0}, "slow");
    $(".step2").animate({"left":"0px"}, "slow");
    $(".step3").animate({"left":"60px"}, "slow");
    $(".step4").animate({"left":"120px"}, "slow");
    $(".step5").animate({"left":"180px"}, "slow");
});

.steps .step1{ margin-right: 100%; right: -60px;}