Vertical auto-scrolling of a list group

Question

I am trying to create auto-scroll a list, an exact replica of the list found at the right side of this website, you need to scroll down a bit, i found an answer here but i observe the scroll is not smooth.

any help with this, with purely CSS, would be much appreciated.

My html is below:

<div class="row">
  <div class="col">
    <div class="card">
      <div class="card-header">List of Donors</div>
      <ul class="list-group donors">
        <li class="list-group-item" *ngFor="let flag of (flags | async)">
          <p>{{ flag.name }} {{flag.address}}</p>
        </li>
      </ul>
    </div>
  </div>
</div>

Css Code:

.list-group-item {
    border-bottom: 1px solid #666;
}

.donors {
    -webkit-transition: opacity 0.5s ease-out;
    -webkit-animation: autoScrolling 5s linear infinite;
    height: 20em;
}

@-webkit-keyframes autoScrolling {
    from {
        margin-top: 0;
    }
    to {
        margin-top: -20em;
    }
}

N:B I am CSS beginner, a working css trick would be appreciated.

@TheDev, i have attached the code for the list i need to style — zeddysoft, Mar 11 '19 at 02:30

score 1 · Accepted Answer · answered Mar 11 '19 at 02:28

If you will look at the code on website you're referring to, you will spot that they use Obsolete <marquee> tag. So if you don't want to use this unrecommended way to achieve your goal, you might consider Javascript solutions, like this:

Javascript Marquee to replace <marquee> tags

Of course, you still can use CSS hacks to do it, for example @keyframes animations, but I'd consider this as a bad code, and I'm not sure if it's better than using outdated HTML tags.

Vertical auto-scrolling of a list group

1 Answers1

Linked