小编mrR*_*iha的帖子

我有一个简单的CSS动画,你可以在这里看到:http://jsfiddle.net/628uzdfn/

它只有一个@keyframes导致问题的动画(当我删除动画时,它不会加热CPU)(手写笔语法):

@keyframes moving

    from
        transform translateX( 0 ) translateZ( 0 )

    to
        transform translateX( -15% ) translateZ( 0 )

问题是如果你让这个页面活出超过10秒钟,你会感觉到你的笔记本电脑下的温暖.如果你离开它超过30秒,它听起来像拖拉机!

我已经在html5rocks上阅读了与性能相关的东西,所以我试图限制我的动画属性,transform甚至试图translateZ( 0 )从GPU请求帮助,但它只是没有改变一件事.

您也可以在此处查看我的性能分析:

有什么我做错了吗？

我应该怎样做才能改善我的动画效果？

更新:忘记提及这个动画是infinite如此可能是问题,但为什么会发生？我已经看过许多无限的CSS动画,这些动画没有出现性能问题.它应该是引起问题的其他因素.

我们有一些框来显示悬停的一些数据.因此,当我们将鼠标移动到一个元素上时,它应该展开,在其他元素前面,并显示隐藏的数据.

我做了这样的事情:

box:hover {
    z-index: 50;
}

但是有一个问题; 当我们将鼠标移动到另一个外部空白区域时,z-index返回到值,与其他空格相同.因此,可见悬停元素位于下层而不是下一层.

如何防止财产申请,直到过渡期结束？

这是我的jsFiddle.尝试将鼠标悬停在一个元素上,将鼠标移出元素,其他元素的背景图像将在转换结束前位于我们的悬停元素前面.

更新:这是问题的屏幕截图.这是我们在元素上取消的时候.background-image另一个元素出现在我们悬停的元素前面.