Why a CSS Animation abruptly ends?

Question

I'm trying to make the marquee animation for the blocks and the animation should be "infinite". But there is a problem that the animation after some time ends and begins abruptly. After ~6 seconds of the animation you can see that the blocks "twitch", I would assume this is when css animation goes from 100% to 0%? Any suggestions how to make it "infinite"? I wouldn't mind using JS or whatever to solve the problem. Codepen: https://codepen.io/1818/pen/WVOKMK

 const root = document.documentElement; const marqueeElementsDisplayed = getComputedStyle(root).getPropertyValue("--marquee-elements-displayed"); const marqueeContent = document.querySelector("ul.marquee-content"); root.style.setProperty("--marquee-elements", marqueeContent.children.length); for(let i=0; i<marqueeElementsDisplayed; i++) { marqueeContent.appendChild(marqueeContent.children[i].cloneNode(true)); } 

 :root { --marquee-width: 80vw; --marquee-height: 20vh; /* --marquee-elements: 12; */ /* defined with JavaScript */ --marquee-elements-displayed: 3; --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed)); --marquee-animation-duration: calc(var(--marquee-elements) * 0.5s); } .marquee { width: var(--marquee-width); height: var(--marquee-height); background-color: #111; color: #eee; overflow: hidden; position: relative; } .marquee:before, .marquee:after { position: absolute; top: 0; width: 10rem; height: 100%; content: ""; z-index: 1; } .marquee:before { left: 0; background: linear-gradient(to right, #111 0%, transparent 100%); } .marquee:after { right: 0; background: linear-gradient(to left, #111 0%, transparent 100%); } .marquee-content { list-style: none; height: 100%; display: flex; animation: scrolling var(--marquee-animation-duration) linear infinite; } /* .marquee-content:hover { animation-play-state: paused; } */ @keyframes scrolling { 0% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); } 100% { transform: translateX(0); } } .marquee-content li { display: flex; justify-content: center; align-items: center; /* text-align: center; */ flex-shrink: 0; width: var(--marquee-element-width); max-height: 100%; font-size: calc(var(--marquee-height)*3/4); /* 5rem; */ white-space: nowrap; } .marquee-content li img { width: 100%; /* height: 100%; */ border: 2px solid #eee; } @media (max-width: 600px) { html { font-size: 12px; } :root { --marquee-width: 100vw; --marquee-height: 16vh; --marquee-elements-displayed: 1; } .marquee:before, .marquee:after { width: 5rem; } } /* STYLES */ .marquee-content li, .marqueetwo-content li, .marqueethree-content li { margin: 20px 20px 20px 20px!important; background: #fff; height: 301px; width: 536px!important; border-radius: 10px; } .marquee, .marqueetwo, .marqueethree { width: auto!important; height: auto!important; } 

  <div class="marquee"> <ul class="marquee-content"> <li><i class="fab fa-github"></i></li> <li><i class="fab fa-codepen"></i></li> <li><i class="fab fa-free-code-camp"></i></li> <li><i class="fab fa-dev"></i></li> <li><i class="fab fa-react"></i></li> <li><i class="fab fa-vuejs"></i></li> <li><i class="fab fa-angular"></i></li> <li><i class="fab fa-node"></i></li> <li><i class="fab fa-wordpress"></i></li> <li><i class="fab fa-aws"></i></li> <li><i class="fab fa-docker"></i></li> <li><i class="fab fa-android"></i></li> </ul> </div> 

Answer 1

You have some issues in your calculation that I fixed like below:

• There is a default padding/margin applied to ul that need to be removed
• You need to account for the margin within the width calculation of each marquee element
• I made the container to be inline-flex so it fit its content and you can consider percentage value inside transform instead of a complex formula.

I removed some code and kept only the relevant one

 const root = document.documentElement; const marqueeElementsDisplayed = getComputedStyle(root).getPropertyValue("--marquee-elements-displayed"); const marqueeContent = document.querySelector("ul.marquee-content"); root.style.setProperty("--marquee-elements", marqueeContent.children.length); for(let i=0; i<marqueeElementsDisplayed; i++) { marqueeContent.appendChild(marqueeContent.children[i].cloneNode(true)); } 

 :root { --marquee-width: 100vw; --marquee-height: 100vh; /* --marquee-elements: 12; */ /* defined with JavaScript */ --marquee-elements-displayed: 3; --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed)); --marquee-animation-duration: calc(var(--marquee-elements) * 0.5s); } body { margin:0; } .marquee { width: var(--marquee-width); height: var(--marquee-height); background-color: #111; color: #eee; overflow: hidden; position: relative; } .marquee:before, .marquee:after { position: absolute; top: 0; width: 10rem; height: 100%; content: ""; z-index: 1; } .marquee:before { left: 0; background: linear-gradient(to right, #111 0%, transparent 100%); } .marquee:after { right: 0; background: linear-gradient(to left, #111 0%, transparent 100%); } .marquee-content { list-style: none; height: 100%; display: inline-flex; /* added this */ padding:0; /* added this */ margin:0; /* added this */ animation: scrolling var(--marquee-animation-duration) linear infinite; } @keyframes scrolling { 0% { transform: translateX(calc(-100% + var(--marquee-width))); } /* modified this*/ 100% { transform: translateX(0); } } .marquee-content li { margin:20px; flex-shrink: 0; width: calc(var(--marquee-element-width) - 40px); /* Modified this */ font-size: calc(var(--marquee-height)*3/4); /* 5rem; */ background:#fff; border-radius: 10px; } 

 <div class="marquee"> <ul class="marquee-content"> <li><i class="fab fa-github"></i></li> <li><i class="fab fa-codepen"></i></li> <li><i class="fab fa-free-code-camp"></i></li> <li><i class="fab fa-dev"></i></li> <li><i class="fab fa-react"></i></li> <li><i class="fab fa-vuejs"></i></li> <li><i class="fab fa-angular"></i></li> <li><i class="fab fa-node"></i></li> <li><i class="fab fa-wordpress"></i></li> <li><i class="fab fa-aws"></i></li> <li><i class="fab fa-docker"></i></li> <li><i class="fab fa-android"></i></li> </ul> </div>