CSS动画(@keyframes)正在加速CPU

Question

我有一个简单的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动画,这些动画没有出现性能问题.它应该是引起问题的其他因素.

Answer 1

不确定您的计算机有什么问题,但在我的计算机中,CPU不是一个大问题.在Chrome 66.0,Ubuntu 18.04中进行测试.

您的动画很简单,但只需更改translateX( -15% )为可以优化2倍(CPU)translateX( -108px ).元素的宽度108px相等15%,但它是固定的pixcel.浏览器不需要重新计算每帧动画的值.所以它肯定会使用更少的CPU.这是优化

Before 之前和之后我的CPU的结果 后