CSS3 Jumpy動畫？

Question

我正在創建一個簡單的CSS3滑塊。 當執行兩個不同的屬性轉換時，特別是一個transform: scale3d和left ，動畫首先進行轉換，然后跳轉到左邊進行轉換。

僅當動畫完成時才發生跳轉。 換句話說，如果連續單擊下一部分，則過渡是平滑的。

這是網站

我做了一個jsFiddle，它看起來像我想在jsFiddle上一樣工作： http : //jsfiddle.net/BdG4k

本質上，這是我的代碼格式：

#slider > * {
    margin-left: -270px;
    position: absolute;
    -webkit-transition: all 1s;
}
#slider .module.leftX {
    left: XX%;
    z-index: 45;
    -webkit-transform: scale3d(0.5, 0.5, 1);
}

注意：在使用它之前，我僅使用-webkit。 然后，我將添加-moz和-ms。

Answer 1

亞倫的問題是，您僅對Webkit瀏覽器使用了transform屬性。

在您的js文件slider.js您僅使用特定於Chrome的供應商前綴-webkit 。 嘗試為Firefox也為IE添加-moz前綴。

$('#slider').ready( function() {
function slide(focus) {
var l1css = {
'opacity': 0.8,
'-webkit-transform': 'scale3d(0.5, 0.5, 1)',
'-moz-transform': 'scale3d(0.5, 0.5, 1)', /*for Firefox*/
'transform': 'scale3d(0.5, 0.5, 1)', /*for IE*/
'margin-left': '-135px',
'left': '19%'
}; 

請檢查正在運行的演示