CSS3 Marquee Effect, Without Empty Space

Question

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.

@LGSon, yes- thank you for answering. I can't remember why I didn't accept it before but I was probably waiting until I tried it and forgot. — Lolums, Nov 13 '17 at 20:17

Asons · Accepted Answer · 2017-03-10T20:46:39.607

17

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>

edited Mar 10 '17 at 20:46

answered Apr 05 '16 at 18:35

Asons

81,773
12
93
144

1

how to start "this is a ..." onload ? – saleem ahmed Jan 25 '18 at 11:16
2

@saleemahmed Not sure if I understand. This animation starts at page load. If you want to start is using a load event, simply move the `animation: marquee 8s linear infinite;` to a class of its own, and in the event handler, add that class to the `marquee` element. – Asons Jan 25 '18 at 11:27
1

Thanks bro, best idea – TeT Psy Feb 14 '19 at 11:57

Rayees AC · Answer 2 · 2020-08-14T07:13:12.343

4

CSS3 Marquee Effect, Without Empty Space

Horizontal Marquee

Horizontal with one right and one left : https://codepen.io/Rayeesac/pen/JjGEYRZ

Vertical Marquee

Vertical with one top and one bottom: https://codepen.io/Rayeesac/pen/eYJgpVy

edited Aug 14 '20 at 07:13

answered Aug 14 '20 at 07:05

Rayees AC

4,244
3
7
28

score 2 · Answer 3 · edited Apr 25 '20 at 15:53

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="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" height="80"></span>
        <span class="item1"></span>
        <span><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" 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>

CSS3 Marquee Effect, Without Empty Space

3 Answers3

Linked