I am trying to come up with a pure CSS ticker (like what you see on TV), only *not* stuck to the bottom of the screen.

I already found stuff that involves JS, But I am trying to avoid JS.

I also found a few pure CSS tickers that other people created. But the problem with those is that they all use position: absolute which sticks them to the bottom of the screen. Once I got rid of the absolute positioning, I get a horizontal scrollbar, as expected.

Any way this can be done with pure CSS while avoiding the scrollbar and sticking the element to a set monitor location?

Here is my starting point fiddle: <https://jsfiddle.net/xcommie/6fkfj3gk/>

**HTML:**

```
<p>Content before ticker</p>
  <div id="tickerwrap">
    <div id="ticker">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel augue eget velit tristique pretium. Nam ultrices nulla risus, ut elementum mauris dignissim at. Sed ultrices placerat dolor, ac congue nunc molestie et.
    </div>
  </div>
<p>Content after ticker</p>

```

**CSS:**

```
/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

/* Formatting the full-width ticker wrapper background, font color, padding and initial content state (the "padding-left" item) */
#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding-left: 100%;
}

/* Formatting the ticker content background, font color, padding and final content state (the padding-right item) */
#ticker {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: customticker;
  animation-name: customticker;
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
}

```