CSS Only Text Carousel / Rotator

Preview:

Description:

A pure CSS text carousel which makes uses of CSS3 animations to cycle through a list of text like a carousel.

How to use it:

Add your text into the carousel.

<div class="text-rotator">
  <div class="slider">
    <div class="mask">
      <ul>
        <li class="anim1">
          <div class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique fringilla dolor, eu facilisis justo auctor eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent convallis enim vel turpis luctus, eu porta massa ornare. Nulla efficitur scelerisque accumsan. Etiam interdum rhoncus justo, ut tincidunt neque pulvinar vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst. Pellentesque elit odio, euismod ac euismod sed, malesuada vitae enim. Suspendisse potenti. Nullam sodales erat imperdiet tellus feugiat, ut pretium sem sagittis. Duis nibh massa, tempus id ultrices ut, aliquam sit amet urna. Pellentesque pharetra tempor nulla, a efficitur ex rhoncus ac. Donec congue vel neque ac efficitur. Nam dignissim et felis suscipit bibendum.</div>
          <div class="source">- Lorem ipsum</div>
        </li>
        <li class="anim2">
          <div class="quote">Cras ut tincidunt urna. Donec luctus nunc vel rhoncus molestie. Morbi volutpat at leo id interdum. Nulla laoreet convallis porta. Curabitur ac diam bibendum, cursus justo vel, accumsan eros. Duis a ligula et felis tincidunt pretium. Aenean posuere massa a dolor facilisis tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum leo in vehicula luctus.</div>
          <div class="source">- Lorem ipsum</div>
        </li>
        <li class="anim3">
          <div class="quote">Sed ultricies, risus at vehicula lobortis, dolor erat luctus diam, a congue nisl ante at velit. Nulla facilisi. Suspendisse vitae lorem sed nibh facilisis pharetra. In venenatis, velit eu finibus suscipit, quam erat placerat risus, ut tempor purus dui vel turpis. Maecenas elit eros, sollicitudin sed urna non, finibus tristique neque. Fusce scelerisque velit nunc, sagittis maximus ligula pretium varius. Fusce consectetur turpis et turpis iaculis vestibulum. Nam enim dui, gravida a odio et, laoreet commodo velit.</div>
          <div class="source">- Lorem ipsum</div>
        </li>
        <li class="anim4">
          <div class="quote">Pellentesque tincidunt, libero et congue egestas, nisl sem accumsan odio, id dapibus lectus tortor ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas at tincidunt risus. Morbi ex nisi, laoreet et aliquam non, mattis non magna. Vivamus fermentum, ex eu ullamcorper fringilla, tortor erat condimentum ex, vitae aliquam arcu eros et mauris. Donec et sapien erat. Quisque non odio odio.</div>
          <div class="source">- Lorem ipsum</div>
        </li>
        <li class="anim5">
          <div class="quote">In vitae lectus sit amet massa consequat rhoncus a in urna. Aenean ut nisi nec dolor malesuada bibendum. Curabitur et augue ligula. Donec efficitur varius ipsum eu aliquet. Donec consequat urna tellus. Sed eget libero venenatis nunc fringilla eleifend eu et libero. Curabitur eget neque ultrices, condimentum elit at, molestie metus. Suspendisse dui arcu, consequat nec augue eget, accumsan fermentum justo. Sed tristique dignissim turpis, et blandit ligula cursus id. Curabitur purus justo, pretium a aliquet id, vestibulum vitae nibh.</div>
          <div class="source">- Lorem ipsum</div>
        </li>
      </ul>
    </div>
  </div>
</div>

Style the text carousel.

.text-rotator {
  width: 100%;
  height: 360px;
}
.slider {
  height: 320px;
  width: 680px;
  margin: 40px auto 0;
  overflow: visible;
  position: relative;
}
.mask {
  overflow: hidden;
  height: 320px;
}
.slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}
.slider li {
  width: 680px;
  height: 320px;
  position: absolute;
  top: -325px;
  list-style: none;
}
.slider .quote {
  font-size: 40px;
  font-style: italic;
}
.slider .source {
  font-size: 20px;
  text-align: right;
}
.slider li.anim1 {
  -moz-animation: cycle 15s linear infinite;
  -webkit-animation: cycle 15s linear infinite;
  animation: cycle 15s linear infinite;
}
.slider li.anim2 {
  -moz-animation: cycle2 15s linear infinite;
  -webkit-animation: cycle2 15s linear infinite;
  animation: cycle2 15s linear infinite;
}
.slider li.anim3 {
  -moz-animation: cycle3 15s linear infinite;
  -webkit-animation: cycle3 15s linear infinite;
  animation: cycle3 15s linear infinite;
}
.slider li.anim4 {
  -moz-animation: cycle4 15s linear infinite;
  -webkit-animation: cycle4 15s linear infinite;
  animation: cycle4 15s linear infinite;
}
.slider li.anim5 {
  -moz-animation: cycle5 15s linear infinite;
  -webkit-animation: cycle5 15s linear infinite;
  animation: cycle5 15s linear infinite;
}
.slider:hover li {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

Create the text rotation effect using CSS3 keyframes.

@-moz-keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@-moz-keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@-moz-keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  40% {
    top: 0px;
    opacity: 1;
  }
  44% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
  }
  60% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@-moz-keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  56% {
    top: -325px;
    opacity: 0;
  }
  60% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@-moz-keyframes cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}
@-webkit-keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@-webkit-keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@-webkit-keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  40% {
    top: 0px;
    opacity: 1;
  }
  44% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  60% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@-webkit-keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  56% {
    top: -325px;
    opacity: 0;
  }
  60% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@-webkit-keyframes cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}