Create Infinite-Scrolling Background Using 2 CSS Classes
summary
Shows a working recipe that creates a seamless horizontal loop using HTML and CSS only, specifically two classes named container and infinite-scrolling. Uses background-image with background-repeat: repeat-x, sets element height to the image height and width to 3× the original image width, animates with animation: slide 60s linear infinite and @keyframes that translate3d from 0 to −originalWidth so the strip scrolls smoothly and continuously.
AI-written summary · about
related talks
45mCSS in the 4th Dimension
36mScroll-Driven Animations with CSS
40mThe Future with Scroll-Driven Animations in CSS
38mFun and Flair with CSS3 Animations
29mScroll linked Animations with CSS
26mCSS animation Today (2021 Edition)
05mCSS Tricks You Gotta Love
32mStunning visuals with Maths and...no JavaScript?