Does load css gradient?

Here is a design sent. Looks nice, but it is believed that will create the load (on the processor). Is it really so? And if so, how to test it? That is, we have to somehow visually show that the load really is and this realization should be abandoned.

body {background: #f9eff6; background: linear-gradient(-45deg, #00ffff, #00ff9d, #f200ff, #ff0000) no-repeat center center fixed; background-size: 500% 500%; -webkit-animation: Gradient 50s ease infinite; -moz-animation: Gradient 50s ease infinite; animation: Gradient 50s ease infinite;}
@keyframes Gradient {0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%}}
March 20th 20 at 11:26
1 answer
March 20th 20 at 11:28
Solution
In theory:

In the process of the animation with a property background-position is constantly going on a full cycle only, that can only happen when the page is rendered:

fblbnrk5cdwptagicpqspwlawku.png

In other words, the load is, Yes.

In practice:

On average the gland one such cycle takes less than 1ms. It's not much. It's not something that will create a "feeling of the brakes" from the user. If you divide 1000ms at 60fps, we'll get somewhere ~16.5 ms per frame. Accordingly, if the animation took 30ms for example, we would saw a log. If the animation is ~10-12ms, then the device still resources to work other scripts, communication with server, etc. and we see fast running page. But in your case, it takes less than 1ms, so there are no good reasons to abandon it. Do not do premature optimization.

Find more questions by tags CSS