CSS animated background: UPDATE

pyrosmiley

Sorry for the double post! For some reason my previous topic can’t be replied to (by myself or others), so I have to make a new one.
@j-e-f-f was kind enough to get back to me very quickly, and here’s what he told me:

You have a syntax error in your CSS snippet, and I’m wondering if it’s actually affecting the script on the page…
In any case, you need to do two things to get your background to animate:
you need to close the rule for .region.fullscreen.below. You’re missing the trailing } after animation: gradient 30s ease infinite;.
You need to give your background a size that is bigger than 100%. Otherwise, there’s nothing to animate.
Also, when working with the Electron browser, there’s no need to use the -webkit- prefixes. These CSS properties will all work natively.
Here is a working example:

.region.fullscreen.below {
  background: linear-gradient(208deg, #15304d, #459fff);
  background-size: 400% 400%;
  animation: gradient 30s ease infinite;
}
@keyframes gradient { 
  0%    {background-position: 25% 0%;}
  50%   {background-position: 76% 100%;}
  100%  {background-position: 25% 0%;}
  }
}

I adjusted the colours to exaggerate the gradient a little… tweak to your liking.

The good news is that it worked really well, and I’m very appreciative! The bad news is that my raspberry pi 3 was not. Long story short, Electron was super struggling to render it, and the machine was giving warnings about overheating – I checked it with vcgencmd measure_temp, and its operating temperature was ~85.1ºC!!! So uh, here’s the solution for anyone that wants to try but that said, please don’t overcook your pies.

In the meantime, I’ll stick with a nice non-lethal background picture.

j.e.f.f

@pyrosmiley Not sure if you’ve been following but there is an issue with Magic Mirror 2.2.0 and Electron 1.7.6 that is triggered runaway CPU usage under no load, and it goes through the roof under any animated transitions. Any visual transitions struggle to animate – sounds like it might be what you’re experiencing…

See this thread for me details:
https://forum.magicmirror.builders/topic/4684/electron-cpu-usage/156?page=16

TL;DR: The solution seems to be to downgrade to MM 2.1.0 and Electron 1.4.15. Maybe give that a try to see if your performance improves.