Hi, please help with adding code for my background to animate like on the link below.
How can I embed the code into my website?
Thanks in advance.
Hi, please help with adding code for my background to animate like on the link below.
How can I embed the code into my website?
Thanks in advance.
Example:
<style>
.your-class-name {
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
</style>
Hi, Sarah.
Sorry, but I can’t get this to work. Could you give me some help? This is my code:
<style>
background: linear-gradient(270deg, #15ca9b, #46c9d7, #c18bf5);
background-size: 600% 600%;
.gradient {
-webkit-animation: backgroundfade 30s ease infinite;
-moz-animation: backgroundfade 30s ease infinite;
animation: backgroundfade 30s ease infinite;
}
@-webkit-keyframes backgroundfade {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes backgroundfade {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes backgroundfade {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
</style>
Thanks!
Sure!
I’d need to see the published site in order to debug. But at first glance, those first two lines need to be applied to a class.
So just include it in here:
.gradient {
background: linear-gradient(270deg, #15ca9b, #46c9d7, #c18bf5);
background-size: 600% 600%;
-webkit-animation: backgroundfade 30s ease infinite;
-moz-animation: backgroundfade 30s ease infinite;
animation: backgroundfade 30s ease infinite;
}
Let me know if it doesn’t work - if it doesn’t, it’d be nice if you could publish it so we could see what’s up.
Haha, of course!
Sorry, thanks a lot for the quick response.
http://pedro-pellicano-s-supercool-site.webflow.io/
PS. F* amazing! Loved this! (sorry, lol).
Cheers!
Oh…I think it’s the scroll angle in that generator!
If the scroll angle is perpendicular to the gradient angle, it won’t be scrolling the right way.
Use 270deg in the linear-gradient
And in the keyframes, use these:
0% 50%
100% 51%
0% 50%
I LOVE those colors! Yay!
Gonna make it my pet project I think, lol.
(click on the hamburger menu)
http://pedro-pellicano-s-supercool-site.webflow.io/
Pedro M. Pellicano - Mkt & Graphic Design
Portfolio - Behance
Skype - mrpellican | | Phone - 5511 98270.7723