Animating an HSLa background color


by Jeremy Caudle
code

I ran into some trouble getting an animation that used HSL for a background color to work properly. After a bit of working with it, and with the help of an HSL color picker, I was able to sort out where I was goofing up.

Duis pellentesque neque felis, ac suscipit justo sagittis quis. Curabitur sodales semper lorem. Ut nec lorem quam. Morbi euismod ultrices sem at dapibus. Integer vel hendrerit mi. Suspendisse potenti. Sed eu leo lectus. Cras placerat ullamcorper cursus. Praesent vestibulum massa at lorem malesuada, vel luctus ipsum rhoncus. Vivamus semper ac tellus vel gravida. Mauris blandit blandit metus ac dapibus. Nunc id neque commodo, dictum est eget, interdum dolor.

View the code:

HTML and JS 
<div class="codedoodle-block">
			<p>Duis pellentesque neque felis, ac suscipit justo sagittis quis. Curabitur sodales semper lorem. Ut nec lorem quam. Morbi euismod ultrices sem at dapibus. Integer vel hendrerit mi. Suspendisse potenti. Sed eu leo lectus. Cras placerat ullamcorper cursus. Praesent vestibulum massa at lorem malesuada, vel luctus ipsum rhoncus. Vivamus semper ac tellus vel gravida. Mauris blandit blandit metus ac dapibus. Nunc id neque commodo, dictum est eget, interdum dolor.</p>
			
		</div>
CSS 
@keyframes rotatehues{
			from { background-color: hsla(0,100%,80%,20%);}
			to {background-color: hsla(240,100%,80%,20%);}
		}
		
		.codedoodle-block {
			padding: 1rem;
			margin: 2rem auto;
			display: block;
			grid-gap: 1rem;
			max-width: 320px;
			border: solid 1px rgba(0, 0, 0, 0.25);
			animation: rotatehues 10s ease-in-out 0s infinite alternate;
		}

Tags