Behold the ingenious code that effortlessly creates a sliding gradient animation without the need for even a single line of JavaScript:
html {
height: 100%
}
body {
height: 100%;
margin: 0
}
@keyframes loading {
from {
background-position: -5000% 0, 0 0
}
to {
background-position: 5000% 0, 0 0
}
}
.skeleton {
height: 100%;
animation-name: loading;
animation-duration: 1.5s;
animation-iteration-count: infinite;
background-color: #fff;
background-repeat: no-repeat;
background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .8) 50%, hsla(0, 0%, 100%, 0)), linear-gradient(#e5e5e5 100%, transparent 0);
background-size: 99% 100%;
}<div class="skeleton"></div>My attempts to modify certain properties have left me confused about how this animation actually operates. Particularly intriguing is when background-size: 99% 100%; is changed to background-size: 100% 100%; resulting in the animation sliding in the opposite direction! How strange!
Can anyone provide a clear explanation?