Question

一辆从div的左侧向右侧潜水4秒的车。它适用于除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%;
}

fiddle

Answer 2

在 Safari 5.1 （Windows）中，我必须将所有时间设置为 ms 。至少可以使用fot background-color属性。

-webkit-transition: all 300ms linear;

转换工作不适用于Safari

2 个答案: