CSS animation not working?

Developer Support CMS Development
1

Hi all,

I’m currently trying to revamp the company I work for’s website, and one of the main changes I wanted to make was the primary feature of dynamic elements, rather than static elements that they have right now.

For one of the section on the homepage, I wanted to have a dynamic gradient that moves and changes color gradually behind a wall of text, so I’ve been creating a module that would do this. However, although the gradient appears and the rest of the style is applied, the animation fails to play. I have absolutely no idea why, especially since I’ve already gotten prior animations to work.

Anyways, here’s my code:

div {
	background: linear-gradient(-45deg, #031c96, #1731b0, green, #06209e);
	animation-name: backgroundgradient1;
 animation-duration: 15s;
 animation-iteration-count: infinite;
 color:white;
 font-size:150%;
}

@keyframes backgroundgradient1 {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
2

Hi, @tdj99 :waving_hand: Thanks for reaching out. Welcome to the community! Hey, @alyssamwilie @Stephanie-OG @Sjardo, do you have any CSS wisdom you can share with @tdj99?

Thank you for taking a look! — Jaycee

3

Hi @tdj99 - I think you need to set the background-size to be larger than the container, so something like:

div {
 background: linear-gradient(-45deg, #031c96, #1731b0, green, #06209e);
 background-size: 400% 400%;
 animation-name: backgroundgradient1;
 animation-duration: 15s;
 animation-iteration-count: infinite;
 color: white;
 font-size: 150%;
}

@keyframes backgroundgradient1 {
 0% {
 background-position: 0% 50%;
 }
 50% {
 background-position: 100% 50%;
 }
 100% {
 background-position: 0% 50%;
 }
}

That seems to work for me. I found code similar to yours here and that’s the main difference.

Stephanie O’Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

4

Perfect! Thank you so much, Stephanie. That was the missing link.