CSS Gradient
Unanswered
Selkirk Rex posted this in #help-forum
Selkirk RexOP
'gradient': {
'0%, 100%': {
'background-size':'400% 100%',
'background-position': 'right center'
},
}
So I just got this from the internet but the gradient just moves back and fourth instead of moving in 1 direction infinitely
'0%, 100%': {
'background-size':'400% 100%',
'background-position': 'right center'
},
}
So I just got this from the internet but the gradient just moves back and fourth instead of moving in 1 direction infinitely
27 Replies
@Philippine Crocodile
Philippine Crocodile
Could you clarify what you're trying to do? An underline effect like on https://www.arianagrande.com/ nav links?
Selkirk RexOP
i just want the gradient to move to the right infinitely
Ohhh not on hover, just forever?
Philippine Crocodile
Welp, I misunderstood initially. Anywho, could you show the code for test too?
Selkirk RexOP
actually on hover as well
but i might get around with. Just cant get around with the gradient
<a href="/" className="whitespace-nowrap font-bold text-lg bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 animate-gradient">
TEST
</a>btw @Philippine Crocodile I need to know.... how did you know about the button effect on https://www.arianagrande.com/ 😂
.background-animate {
background-size: 400%;
-webkit-animation: AnimationName 3s ease infinite;
-moz-animation: AnimationName 3s ease infinite;
animation: AnimationName 3s ease infinite;
}
@keyframes AnimationName {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}export default function Home() {
const setCookiedude = async () => {
await dothings();
}
return (
<>
<button
onClick={() => setCookiedude()}
className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 background-animate"
>
Click me for cookie!
</button>
</>
);
}I think this does what you want?
Wait it is resetting itself one sec
This looks much better I think
Today I learned https://tailwindcss.com/docs/background-image
Selkirk RexOP
but the animation still goes back and fourth
I see what you mean... you want it to transition essentially from red->yellow->red.... repeating?
I dont know how to acheive what your looking for right now. Ill give a stab at it tomorrow, I have a colleague that knows css very well
@Jboncz I see what you mean... you want it to transition essentially from red->yellow->red.... repeating?
Selkirk RexOP
basically jsut going this way
infinitely
Well that’s not how a gradient works you eventually run out of color.
Think of a gradient as a big poster.
You will always run out you just have to figure out how to transition smoothly back to the beginning to give the appearance of a never ending gradient when in reality there is a limit.
Selkirk RexOP
hmm i see, ill try doing 3 colors i guess
do u mind explaining what these are. I cant seem to find it on the internet