How to make marquee style using CSS

Question

I used marquee element before for my flash news but since it was deprecated based on this https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee I tried to use CSS instead. but there is a problem I encounter only the 1st span element is being shown not the rest of my span element.

.flashnews_today {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  /*box-sizing: border-box;*/
  /*border: 1px green solid;*/
}

.flashnews_today span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  /*border: 1px red solid;*/
  -webkit-animation: flashnews_today 45s linear infinite;
  animation: flashnews_today 45s linear infinite;
}

.flashnews_today span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes flashnews_today {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

<div class="flashnews_today">
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span><span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user.</span>
  <span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user. </span>
</div>

Possible duplicate of [CSS3 Marquee Effect](https://stackoverflow.com/questions/21233033/css3-marquee-effect) — VXp, Sep 17 '18 at 07:32
You need to put all the content inside 1 span (or any other element), if doing it this way, then if necessary nest it further. — VXp, Sep 17 '18 at 07:35
As you have `padding-left: 100%;` as soon as the animation reaches 100% , it is the end of animation.... — Ali Sheikhpour, Sep 17 '18 at 07:49
not exactly the way i wanted but based on your comment i decided to display my data inside the span element. — Lion Smith, Sep 18 '18 at 09:46
I see, well you can still nest it there, or replace the span with the div (display: inline-block) and put those spans inside, if you need any help, let me know. — VXp, Sep 18 '18 at 10:05

score 0 · Answer 1 · answered Sep 17 '18 at 07:45

Your CSS refers to all span tags, and it is trying to animate them at the same position. Therefore, only the first one is displaying while preventing others to be displayed. If you use br tag after each span you will see that your other spans now become visible.

.flashnews_today {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  /*box-sizing: border-box;*/
  /*border: 1px green solid;*/
}

.flashnews_today span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  /*border: 1px red solid;*/
  -webkit-animation: flashnews_today 45s linear infinite;
  animation: flashnews_today 45s linear infinite;
}

.flashnews_today span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes flashnews_today {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

<div class="flashnews_today">
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
  <br/>
  <span>Hello, I am a StackOverflow user. </span>
  <br/>
  <span>Hello, I am a StackOverflow user.</span>
  <br/>
  <span>Hello, I am a StackOverflow user. </span>
  <br/>
  <span>Hello, I am a StackOverflow user. </span>
  <br/>
  <span>Hello, I am a StackOverflow user. </span>
</div>

chintuyadavsara · Answer 2 · 2018-09-17T08:30:37.550

All the span tags are considering as a single. In the .flashnews_today span add a css display property to block. It will work fine.

.flashnews_today {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  /*box-sizing: border-box;*/
  /*border: 1px green solid;*/
  
}

.flashnews_today span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  /*border: 1px red solid;*/
  -webkit-animation: flashnews_today 45s linear infinite;
  animation: flashnews_today 45s linear infinite;
  display:block;
}

.flashnews_today span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes flashnews_today {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="flashnews_today">
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span><span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user.</span>
  <span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user. </span>
</div>
</body>
</html>

i want it to work as a single line. like the first span will slide then next is the next span and so on.. something like that. — Lion Smith, Sep 17 '18 at 08:12

How to make marquee style using CSS

2 Answers2