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 与 XXpx 放在一起，并将 XX% 与 XX% 放在一起。

对于这项工作，您需要将 #left.animate +20px 更改 +XX%;

#left.animate {
    right: 20%;
}

fiddle