性能比较-webkit-关键帧的

我有以下CSS动画：性能比较-webkit-关键帧的

.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特性动画，而不是翻译变换，但我更愿意首先咨询这个问题。

谢谢。

来源

2014-03-29 xger86x

使用通常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。

来源

2014-03-29 17:14:11 Tibos

我试过了你的解决方案，但是当我在动画运行时滚动时它仍然“跳跃”。 – xger86x

我不知道webkit如何计算转换，但通常是通过乘以可能非常痛苦的矩阵完成的。

虽然我会使用margin-left，而不仅仅是left。 margin-left会计算距离父元素的距离，对我来说一直为关键帧动画工作。

来源

2014-03-29 16:58:43 Banana

性能比较-webkit-关键帧的

回答

相关问题