.marquee-css {
position: relative;
height: 120px;
overflow: hidden;
}
.marquee-track-css {
height: 120px;
position: absolute;
white-space: nowrap;
display:inline-flex;
align-items: center;
animation: marquee 10s linear infinite;
background-color:lavender;
padding:0px;
margin: 0;
font-size: 50px;
line-height:50px;
text-transform: uppercase;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt ·
After the ‘animation-duration’ time is over, here 10 seconds, the animation will snap back to the starting point
Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt ·
This is fixed by duplicating the content MANY TIMES, and setting the ‘animation-duration’ to a high number so the glitch happens after a long time, and the page visitor is very unlikely to notice it, like here it runs once every 210 seconds:
Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt ·
Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt ·
Simplified, with Elementor HTML widget
Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt ·
Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt · Lorem ipsum dolor sit amet · consectetur adipiscing elit · quis nostrud exercitation ullamco · sunt in culpa qui officia deserunt ·
selector {
overflow: hidden;
}
selector .marquee-track-css {
height: 120px;
white-space: nowrap;
display:inline-flex;
align-items: center;
animation: marqueeX 90s linear infinite;
background-color:lavender;
font-size: 50px;
line-height:50px;
text-transform: uppercase;
}
@keyframes marqueeX {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
















































































































CSS Vertical Marquee, just CSS with fixed height












.marquee-css {
position: relative;
width:300px;
height:1800px;
overflow:hidden;
background-color:green;
}
.marquee-track-css {
position: absolute;
width:100%;
padding:10px;
will-change: transform;
animation: marqueeY 180s linear infinite;
}
.marquee-css img {
margin-right:0;
margin-left: auto;
margin-bottom: 24px;
display: block;}
@keyframes marqueeY {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
.marquee-css img:nth-of-type(odd){margin-right: auto;margin-left:0;}
















































































































CSS Vertical Marquee, using the Elementor column and section
/* Column containing the HTML widget with the marquee */
selector {overflow: hidden;}
The left column will take on the height of this column. There is no height set to the HTML widget, so just the overflow makes the content visible. Set the HTML widget position to absolute.
HTML widget content













HTML widget css
selector {
animation: marqueeY 120s linear infinite;
padding:10px;
}
selector img {
margin-right:0;
margin-left: auto;
margin-bottom: 24px;
display: block;}
@keyframes marqueeY {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
selector img:nth-of-type(odd){margin-right: auto;margin-left:0;}