Scrolling text for display names

[linux-lukas]

Longer display names will be cut off - here a scrolling text would be better, so that the name can be displayed completely.

Example: https://jugendforum-nrw.de/fediwall:

[defnull]

I think there is a CSS-only solution to this. Something like:

.animoverflow {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.animoverflow > * {
  display: inline-block;
  position: relative;
  animation-name: autoscroll;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes autoscroll {
  0%, 50% {
    transform: translateX(0%);
    left: 0%;
  }
  100% {
    transform: translateX(-100%);
    left: 100%;
  }
}

[linux-lukas]

ok. :)

[realpixelcode]

animation-duration: 5s;

Hard-coding the scroll duration like this results in different scroll speeds for display names with different lengths. 👀