過渡無法在Safari上正常工作

Question

從div的左側到右側潛水4秒鍾的汽車。 它適用於除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放在XXpx with XXpx ，並將XX％和XX％放在XXpx with XXpx 。

為此，您需要將#left.animate +20px by +XX%;更改#left.animate +20px by +XX%;

#left.animate {
    right: 20%;
}

小提琴

Answer 2

在Safari 5.1 （Windows）中，我不得不將所有時間設置為ms 。 至少要使background-color屬性起作用。

-webkit-transition: all 300ms linear;