CSS Animation ( @keyframes ) is heating up CPU

Question

I have a simple CSS animation as you can see here: http://jsfiddle.net/628uzdfn/

It simply has one animation @keyframes which is causing the problem ( when I remove animation, it doesn't heat up CPU )( stylus syntax ):

@keyframes moving

    from
        transform translateX( 0 ) translateZ( 0 )

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

The problem is if you let this page live for more than 10 seconds, you're going to feel the warmth under your laptop. If you leave it for more than 30 seconds, it will sound like a tractor!

I've already read performance-related stuff on html5rocks so I tried to limit my animating properties to only transform even tried to put translateZ( 0 ) to ask for help from GPU, but it just doesn't change a thing.

You can see my performance profiling here as well:

Is there anything I'm doing wrong?

What should I do to improve my animation in terms of its performance?

Update: Forgot to mention this animation is infinite so it can be the problem, but why is it happening? I've already seen many infinite CSS-animations which didn't make a performance issue. It should be something else causing the problem.

Answer 1

Not sure what wrong with your computer but in my computer, CPU is not a big problem. Testing in Chrome 66.0, Ubuntu 18.04.

Your animation is simple but it can be optimized 2x (CPU) better just by changing translateX( -15% ) to translateX( -108px ). 108px equal 15% width of your element but it is in fixed pixcel. Browser do not need to re-caculate the value each frame of animation. So it will definitely use less CPU. Here is the result of my CPU before and after optimizing

Before After

Answer 2

There's no way for me to test this, but I'm giving it a shot.

My initial thoughts on why this might be happening after you've already made the correct css GPU enhancements is from the %'s and float's and the amount of .block's your animating (just some wild guesses).

I made the changes and recreated the .block's with a repeating-linear-gradient with a few other changes.

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>