过渡在 Safari 上不起作用答案

【问题标题】：Transition is working not working on Safari过渡在 Safari 上不起作用
【发布时间】：2013-08-16 08:00:11
【问题描述】：

在 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;
}

【问题讨论】：

你可以添加 jsFiddle 以查看操作代码吗？
jsfiddle.net/Bqnd9/3这个效果？我检查为什么在 safari 上它不起作用
嗯，当我删除 .animate 的 % 并放入 px 时，这适用于 safari。
但是没有响应。

标签： css safari transition

【解决方案1】：

对于 Safari，您需要输入XXpx with XXpx，并将 XX% 与 XX%。

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

#left.animate {
    right: 20%;
}

fiddle

【讨论】：

【解决方案2】：

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

-webkit-transition: all 300ms linear;

【讨论】：