Css gradient animation as filling for circle

1

Hi,

i am new to Hype. Thanks for this fantastic application.

Here is my first question:
I would like to have a css gradient animation running inside of a circle.

This is my css script:

<style> {
	background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
	background-size: 400% 400%;
	animation: gradient 7s ease infinite;
	height: 1080px;
	width: 1920px;
	z-index:-2;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
</style>

I have copied this to the inner HTML of my circle but is not running.
What do i have to do?

Thanks

2

Hi Pete,

Where did you get this code from? It doesn't seem to apply to any element -- it is invalid CSS code. This post might help you see how a gradient can be applied to a Hype element or scene background:

3

It was striped out of my plain html/css site.
The animation is now working perfectly.

Thanks!