轉換工作不適用於Safari

一輛汽車在4秒內從一個div的左側跳到右側。它適用於Safari瀏覽器以外的所有瀏覽器。轉換工作不適用於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; 
}

來源

2013-08-16 Lonneke

你可以添加jsFiddle看行動上的代碼嗎？ – artSx

http://jsfiddle.net/Bqnd9/3/這種效果？我檢查了爲什麼在safari上它不起作用 – artSx

嗯，當我刪除％for .animate並且我把px，這在safari上有效。 – artSx

對於Safari瀏覽器，你需要把XXpx with XXpx，和XX％與XX％。

對於這項工作，你需要改變#left.animate +20px by +XX%;

#left.animate { 
    right: 20%; 
}

fiddle

來源

2013-08-16 13:40:57 artSx

在的Safari 5.1（Windows）中我不得不把所有的時序在毫秒。至少fot背景顏色屬性工作。

-webkit-transition: all 300ms linear;

來源

2014-04-01 08:28:41

轉換工作不適用於Safari

回答

相關問題