css - 过渡在 Safari 上不起作用

Question

一辆在 4 秒内从 div 左侧跳到右侧的汽车。它适用于除 safari 之外的所有浏览器。

我应该怎么做才能让它在 safari 上运行？

#left {
    padding-top: 6px;
    height: 19px;
    width: 45px;
    position: absolute;
    background-color: white;
    right: 90%;
    transition: right 4s ease-in;
    -webkit-transition: right 4s ease-in;
}
#right {
    position: absolute;
    right: 10px;
    background-color: white;
    background-image: url('img/paal_sprite.gif');
    background-repeat: no-repeat;
    background-position: 0px 0;
    transition: background-position 0s linear 4s;
    -webkit-transition: background-position 0s linear 4s;
    width: 10px;
    height: 30px;
}
#left.animate {
    right: +20px;
}
#right.animate {
    background-position: -12px 0; 
}
#container {
    position: relative;
    overflow:hidden;
    height: 25px;
    visibility: visible;
}

Answer 1

对于 Safari，您需要将XXpx with XXpx, 和 XX% 与 XX% 放在一起。

对于这项工作，你需要改变#left.animate +20px by +XX%;

#left.animate {
    right: 20%;
}

小提琴

Answer 2

在Safari 5.1 (Windows) 中，我必须将所有时间都放在ms中。至少让 background-color 属性起作用。

-webkit-transition: all 300ms linear;