Ecommerce Shopify WordPress Discussion

CSS image scrolling animation stopping too soon

I have the following code in a HTML Block on a Wordpress website: <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Durchlaufendes Band aus Bildern mit CSS</title> <style> #bildband-container { overflow: hidden; width: 100%; } #bildband { display: flex; animation: scroll 10s linear infinite; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } img { width: auto; height: 300px; object-fit: cover; } </style> </head> <body> <div id="bildband-container"> <div id="bildband"> <img src="url1" alt=""> <img src="url2" alt=""> <img src="url3" alt=""> </div> </div> </body> </html> It is supposed to scroll sideways through some images/logos in an infinite band. The URLs are correct and it seems to work but stops after ~1.5 images and goes back to the start. The images are all different sizes so that might be a problem since it worked when they were all set to the same width with auto height (width: 100px, height: auto). Also if I adjust the height to something higher it stops even sooner. I honestly dont know what I am missing here. I tried removing object-fit: cover; and using different scroll speeds and heights of the images. Also I triple checked the URLs were not the problem and even used the same image 3 times. Nothing changed.
Just add more keyframes: @keyframes scroll { 0% { transform: translateX(0); } 25% { transform: translateX(25%); } 50% { transform: translateX(50%); } 75% { transform: translateX(75%); } 100% { transform: translateX(-100%); } }

January 27, 2024

Replace the 10s with 200ms(or something less than 10s) to fast the animation. This decreases the duration of the whole animation. #bildband { display: flex; animation: scroll 10s linear infinite; } This will automatically increase the speed! If the animation stop then add an 50% keyframe like this: @keyframes youranimation{ 0%{ transform:translateX(0%); } 50%{ transform:translateX(-100%); } 100%{ transform:translateX(0%); } }

January 27, 2024

One way of getting a smooth continuous flow is to have two copies of the images and move the container just 50% of its width before starting again. And make the container have at least twice the width of its container (the snippet uses a min-width of 200vw in this example). <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Durchlaufendes Band aus Bildern mit CSS</title> <style> #bildband-container { overflow: hidden; width: 200vw; } * { margin: 0; } #bildband { display: flex; width: fit-content; min-width: 200vw; justify-content: space-around; animation: scroll 10s linear infinite; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } img { width: auto; height: 300px; margin: 0 20px; } </style> </head> <body> <div id="bildband-container"> <div id="bildband"> <img src="https://picsum.photos/id/1015/200/300" alt=""> <img src="https://picsum.photos/id/1016/300/300" alt=""> <img src="https://picsum.photos/id/1018/400/300" alt=""> <img src="https://picsum.photos/id/1015/200/300" alt=""> <img src="https://picsum.photos/id/1016/300/300" alt=""> <img src="https://picsum.photos/id/1018/400/300" alt=""> </div> </div> </body> </html> Run code snippetExpand snippet

January 27, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.