CSS animated gradient in the background?



  • 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!


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.