Css3 Marquee Effect, Without Empty Space
This Question Here Has an Answer, Which Leaves a Lot of Empty Space at the End of Each Iteration of the Marquee: Css3 Marquee Effect Is There a Way to Achieve...
This question here has an answer, which leaves a lot of empty space at the end of each iteration of the marquee: CSS3 Marquee Effect
Is there a way to achieve a smooth <marquee></marquee> effect, using CSS3, that doesn't leave this space?
I have a lot of small elements, which look a bit like SO's blue tags, that exclusively fill the content of the marquee, as opposed to one continuous body or a wall of text.
3 Answers
Here is a sample how you can do, and by setting the delay and duration you control the space between the texts
.marquee {
background-color: #ddd;
width: 500px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
}
.marquee span {
display: inline-block;
font-size: 20px;
position: relative;
left: 100%;
animation: marquee 8s linear infinite;
}
.marquee:hover span {
animation-play-state: paused;
}
.marquee span:nth-child(1) {
animation-delay: 0s;
}
.marquee span:nth-child(2) {
animation-delay: 0.8s;
}
.marquee span:nth-child(3) {
animation-delay: 1.6s;
}
.marquee span:nth-child(4) {
animation-delay: 2.4s;
}
.marquee span:nth-child(5) {
animation-delay: 3.2s;
}
@keyframes marquee {
0% { left: 100%; }
100% { left: -100%; }
}<p class="marquee">
<span>this is a</span>
<span>simple marquee</span>
<span>using css</span>
<span>only tech</span>
<span>with a delay</span>
</p>CSS3 Marquee Effect, Without Empty Space
Horizontal Marquee
Horizontal with one right and one left :
Vertical Marquee
Vertical with one top and one bottom:
If the marquee is big enough, you can swap one of the collections at mid animation.
This is as far as you can get with CSS alone, I think
.marquee {
width: 100%;
height: 80px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
border: 1px solid blue;
}
.marquee-content {
display: inline-block;
margin-top: 5px;
animation: marquee 15s linear infinite;
}
.item-collection-1 {
position: relative;
left: 0%;
animation: swap 15s linear infinite;
}
@keyframes swap {
0%, 50% {
left: 0%;
}
50.01%,
100% {
left: 100%;
}
}
.marquee-content:hover {
animation-play-state: paused
}
.item1 {
display: inline-block;
height: 70px;
width: 140px;
background: cyan;
vertical-align: top;
margin-left: 15px;
}
.item2 {
display: inline-block;
height: 70px;
width: 100px;
background: magenta;
vertical-align: top;
margin-left: 15px;
line-height: 14px;
}
/* Transition */
@keyframes marquee {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-100%)
}
}<div class="marquee">
<div class="marquee-content">
<span class="item-collection-1">
<span><img src="" height="80"></span>
<span class="item1"></span>
<span><img src="" height="80"></span>
<span class="item1"></span>
<span class="item1"></span>
<span class="item1"></span>
<span class="item1"></span>
</span>
<span class="item-collection-2">
<span class="item2"></span>
<span class="item2"></span>
<span class="item2"></span>
<span class="item2"></span>
<span class="item2"></span>
<span class="item2"></span>
<span class="item2"></span>
<span class="item2"></span>
</span>
</div>
</div>Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
