JSFiddle - React, Tailwind, and code Playground

by 1UnitedPower

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<div id="content">
Content<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>Content<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>Content<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>Content<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>

CSS

html,body,div{
  height: 100%;
}
#content {
  position: absolute;
  animation-duration: 5s;
  animation-name: scrolldown;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes scrolldown {
  0% {
    top: 0px;
  }
  100% {
    top: -100%;
  }
}