# CSS animation not working?

**URL:** <https://community.hubspot.com/t/css-animation-not-working/63637>\
**Category:** CMS Development\
**Created:** [August 24, 2022, 1:37pm UTC](https://community.hubspot.com/t/css-animation-not-working/63637 "2022-08-24T13:37:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tdj99](https://avatars.discourse-cdn.com/v4/letter/t/a183cd/32.png) [@tdj99](https://community.hubspot.com/u/tdj99)\
**Post date:** [August 24, 2022, 1:37pm UTC](https://community.hubspot.com/t/css-animation-not-working/63637/1 "2022-08-24T13:37:49Z")

</div>

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:

```lia-code-sample
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%;
	}
}

```

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [August 25, 2022, 10:00pm UTC](https://community.hubspot.com/t/css-animation-not-working/63637/2 "2022-08-25T22:00:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [August 26, 2022, 12:52am UTC](https://community.hubspot.com/t/css-animation-not-working/63637/3 "2022-08-26T00:52:52Z")

</div>

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

```lia-code-sample
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](https://codepen.io/P1N2O/pen/pyBNzX) and that’s the main difference.

* * *

**Stephanie O’Gay Garcia**

[Freelance HubSpot CMS Developer](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity)

[Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity)

---

<div class="post-metadata">

**Author:** ![tdj99](https://avatars.discourse-cdn.com/v4/letter/t/a183cd/32.png) [@tdj99](https://community.hubspot.com/u/tdj99)\
**Post date:** [August 26, 2022, 11:31am UTC](https://community.hubspot.com/t/css-animation-not-working/63637/4 "2022-08-26T11:31:57Z")

</div>

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