I am attempting to create a vertically animated linear-gradient, but for some reason it only works when I use pixel values instead of percentages for the background-position in keyframes. Using a percentage would be more flexible since the dimensions of the element may change.
When the gradient is oriented at 90 degrees, it functions properly, but it displays horizontally instead of vertically.
Below is the code snippet:
div {
width: 50px;
height: 150px;
background: linear-gradient(0deg, yellow, orange, red, violet, purple, blue, yellow);
animation: color 5s linear infinite;
margin: 50px auto;
}
@keyframes color {
0% {
background-position: 0%;
}
100% {
background-position: 200%; /* does not work */
/*background-position: 0 -150px; -> works fine but not ideal */
}
}<div></div>I have tried using negative values and other variations of background-position with no success.
Here is a link to the pen with the code: https://codepen.io/petruhaand1/pen/jOKMrWB