CSS animation not working?

[tdj99]

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%;
	}
}

[Stephanie-OG · Accepted solution]

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

[tdj99]

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

[Jaycee_Lewis]

Hi, @tdj99 👋 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