Rolling Text Effect In Pure CSS

A subtle text rolling effect that slides through a series of text using CSS3 animations.

How to use it:

1. Add your text to the roller.

<span id="rolltext">
  HTML<br/>
  CSS<br/>
  No JavaScript<br/>
  ... more text here ...

2. The example CSS for the roller.

.roller{
  height: 4.125rem;
  line-height: 4rem;
  position: relative;
  overflow: hidden; 
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1D3557;
}

3. Enable the rolling effect on the text.

.roller #rolltext {
  position: absolute;
  top: 0;
  animation: slide 5s infinite;  
}
@keyframes slide {
  0%{
    top:0;
  }
  25%{
    top: -4rem;    
  }
  50%{
    top: -8rem;
  }
  72.5%{
    top: -12.25rem;
  }
}