Printable Version of Topic

Posted by: icanswim70 Aug 19 2019, 09:46 AM

Hey everyone, i'm working on a linear gradient background for my site, but can't get the animation to work, I've gone over the code 1000 times and even used online code checkers to confirm I didn't miss anything.

I'll just confirm what I've done:

Coded a div (100% width) it is the outer most div)

class name colorchange

Onto the code


@-webkit-keyframes colorchanger {
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
@-moz-keyframes colorchanger {
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
@keyframes colorchanger {
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.colorchange {
width: 100%;
border-radius: 5px;
background: linear-gradient(270deg, #5fd400, #929292);
-webkit-animation: colorchanger 30s ease infinite;
-moz-animation: colorchanger 30s ease infinite;
animation: colorchanger 30s ease infinite;
}

Can someone help me out

Thanks