CSS Text background animation

animation.css

/*
* Create an element with class 'hero-text'
*
*/

.hero-text {
	background: radial-gradient(circle, #0284c7, #ca8a04);
	background-clip: text;
	color: transparent;
	background-size: 200% 200%;
	animation: hero-text 15s linear infinite;
}

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