How can I prevent the background image from jumping effect during animation looping? What I have already attempted:
- Switching animation type from transition to position change (left: 0 -> left: -100%)
- Replacing the background image with a background gradient, but the result remains the same
<button class="loader">
<span>Loader</span>
</button>
@keyframes sliding {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}
body {
padding: 32px;
}
.loader {
width: 224px;
box-sizing: border-box;
padding: 14px;
border: none;
border-radius: 2px;
background-color: tomato;
position: relative;
overflow: hidden;
pointer-events: none;
}
.loader:after { content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background-color: tomato;
background-image: url("data:image/svg+xml,%3Csvg width='210' height='59' viewBox='0 0 210 59' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha...
color: white;
background-repeat: repeat-x;
animation: sliding 1.75s linear infinite;
will-change: transform;
}
.loader span {
line-height: 20px;
font-size: 16px;
color: white;
}