4. CSS animated gradient in the background?

CSS animated gradient in the background?

  • P

    I actually just made a comment explaining how I managed to get a CSS gradient in the background and not just the margins, but I’m still not quite where I want to be. I’m working on a vertical display board for the side of my fridge instead of a mirror, and it would be absolutely killer to have a slowly scrolling gradient, like the ones generated here and here (along with, I’m sure, a ton of other places!).
    My issue is though, while I can generate a static gradient that looks nice enough, I cannot for the life of me get it to animate. I have no idea why. Is this type of CSS animation just not doable in the MM framework, do I have to put it in its own <div> or something? I have no idea.
    Here’s the relevant part of my custom.css file:

    .region.fullscreen.below {
  background: linear-gradient(208deg, #235182, #196586);
  -webkit-animation: gradient 30s ease infinite;
  animation: gradient 30s ease infinite;

@-webkit-keyframes gradient {
  0%{background-position:25% 0%}
  50%{background-position:76% 100%}
  100%{background-position:25% 0%}
  }
@keyframes gradient { 
  0%{background-position:25% 0%}
  50%{background-position:76% 100%}
  100%{background-position:25% 0%}
  }
}

    I’m not entirely sure what they do or what they’re called, but I’ve tried this with the @keyframes part inside and outside the .region element, above and below. Still nothing. :shruggie:
    If it’s possible, it seems like it’d be super cool. Maybe I could try and put it in a module based on the MMM-ProfilePicture module that I’ve been using until recently?
    Sorry if this is a dumb and obvious question, and also thanks!

0