CSS动画（@keyframes）正在加热CPU

Question

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

它只有一个动画@keyframes，这会引起问题（当我删除动画时，它不会使CPU发热）（stylus syntax）：

@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% )更改为translateX( -108px )，就可以将动画优化2倍（CPU）。 108px等于元素的15%宽度，但以固定像素为单位。浏览器不需要重新计算动画每一帧的值。因此，它肯定会使用更少的CPU。这是优化前后我的CPU的结果

之前 后

Answer 2

我无法对此进行测试，但是我正在尝试一下。

在做出正确的css GPU增强后，为什么会发生这种情况，我最初的想法是来自%和float以及.block的数量是您的动画（只是一些疯狂的猜测）。

我进行了更改，并使用.block和其他一些更改重新创建了repeating-linear-gradient。

https://codepen.io/oneezy/pen/JwbpPz

@keyframes moving {
	from 	{ transform: translateX(-50px) translateZ(0); }
	to 		{ transform: translateX(-150px) translateZ(0); }    
}

.container {
	width: 600px;
	height: 100px;
}

.street {
	background: #333;
	height: 100%;
	width: 100%;
	display: flex; flex-direction: column; justify-content: center;
	overflow: hidden;
}

.block {
	animation:  moving 1.5s linear infinite;
	will-change: transform;
	display: block;
	width: 200%; height: 6px;
	transform: translateX(-50px);
  	background-image: repeating-linear-gradient(to right, transparent, transparent 50px, white 50px, white 100px);
}

<div class="container">
  <div class="street">
    <div class="block"></div>
  </div>
</div>