I have 4 elements that I would like to animate with a gradient background.
Here is an illustration of what I am trying to achieve:
.element div {
display: inline-block;
height: 16px;
animation: slide 2s infinite;
animation-timing-function: linear;
background: linear-gradient(90deg, rgba(242,243,245,1) 0%, rgba(242,243,245,1) 40%, rgba(223,223,223,1) 50%, rgba(242,243,245,1) 60%, rgba(242,243,245,1) 100%);
}
.element div:nth-child(1) {width: 75%;}
.element div:nth-child(2) {width: 65%;}
.element div:nth-child(3) {width: 55%;}
.element div:nth-child(4) {width: 45%;}
@keyframes slide {
from { background-position: 0 0; }
to { background-position: 1300px 0; }
}
html,
body {
height: 100%;
}<div class="element">
<div></div>
<div></div>
<div></div>
<div></div>
</div>This CSS animation moves the background across all four elements smoothly:
@keyframes slide {
from { background-position: 0 0; }
to { background-position: 1300px 0; }
}
The background-position property is currently set to 1300px, which may cause issues with the animation for other elements.