The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help: CSS linear Gradient Animation
icanswim70
post Aug 19 2019, 09:46 AM
Post #1


Newbie
*

Group: Members
Posts: 15
Joined: 23-May 19
Member No.: 26,898



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 10:58 PM