性能比較-webkit-關鍵幀的

Question

我有以下CSS動畫：

.already-visible { 
    -webkit-transform: translateY(0); 
    -webkit-transform: translateX(0); 
    -webkit-animation: none; 
    -moz-transform: translateY(0); 
    -moz-transform: translateX(0); 
    -moz-animation: none; 
} 

.come-left-in { 
    display: block; 
    -webkit-transform: translateX(-1000px); 
    -webkit-animation: come-in 1s ease-out forwards; 
    -moz-transform: translateX(-1000px); 
    -moz-animation: come-in 1s ease forwards; 
} 


@-webkit-keyframes come-left-in { 
    to { -webkit-transform: translateX(0);  
    } 
} 
@-moz-keyframes come-left-in { 
    to { -moz-transform: translateX(0);  
    } 
} 

我用它來顯示在主頁上爲用戶的每個部分的標題向下滾動（使用scrollspy從引導3）。但是當我在動畫運行時進行滾動時，我注意到性能不足，就像有點「跳躍」。有沒有辦法避免這種情況？我想使用左CSS特性動畫，而不是翻譯變換，但我更願意首先諮詢這個問題。

謝謝。

Answer 1

使用通常GPU加速的3d變換（即使變換是2d）。

.already-visible { 
    -webkit-transform: translate3d(0, 0, 0); 
    -webkit-animation: none; 
    -moz-transform: translate3d(0, 0, 0); 
    -moz-animation: none; 
} 

.come-left-in { 
    display: block; 
    -webkit-transform: translate3d(-1000px, 0, 0); 
    -webkit-animation: come-in 1s ease-out forwards; 
    -moz-transform: translate3d(-1000px, 0, 0); 
    -moz-animation: come-in 1s ease forwards; 
} 


@-webkit-keyframes come-left-in { 
    to { -webkit-transform: translate3d(0, 0, 0);  
    } 
} 
@-moz-keyframes come-left-in { 
    to { -moz-transform: translate3d(0, 0, 0);  
    } 
} 

瞭解更多關於HTML5 Rocks 此外，here。

Answer 2

我不知道webkit如何計算轉換，但通常是通過乘以可能非常痛苦的矩陣完成的。

雖然我會使用margin-left，而不僅僅是left。 margin-left會計算距離父元素的距離，對我來說一直爲關鍵幀動畫工作。