Rolling Text

index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Special+Elite">

<div class="text-scroll">
      <p>I'm a</p>
      <div class="scrolling-words">
        <p>front end developer.</p>
        <p>curious creator.</p>
        <p>knowledge junkie.</p>
        <p>collaborator.</p>
      </div>
      <div></div>
    </div>

rolling-text.markdown

Rolling Text

A Pen by Raven Askew on CodePen.

License.

style.css

body {
  background: url('https://subtlepatterns.com/patterns/notebook.png');
}

* {
  font-family: "Special Elite", cursive;
}

  /*******************************
  ROLLING TEXT KEYFRAME
  ********************************/

  .text-scroll p {
    height: 20px;
    float: left;
    white-space: nowrap;
    position: relative;
    font-size: 43px;
    font-weight: bold;
    margin-top: 22%;
  }

  .text-scroll {
    max-height: 50px;
    max-width: 586px;
    margin: 0 auto;
    padding-left: 15%;
    float: left;
  }

  .scrolling-words {
    overflow: hidden;
    height: 54px;
    padding-left: 15px;
    margin-top: 21%;
  }

  .scrolling-words  p {
    margin: 0 0 30px;
    padding-top: 5px;
    white-space: nowrap;
    -webkit-animation: move 8s 1s infinite;
    -moz-animation: move 8s 1s infinite;
    -o-animation: move 8s 1s infinite;
    -ms-animation: move 8s 1s infinite;
    animation: move 8s 1s infinite;
    font-size: 43px;
    letter-spacing: 1px;
  }

  @-moz-keyframes move {
    0%  { top:  0px;   }
    20% { top: -56px;  }
    40% { top: -110px; }
    60% { top: -167px; }
    80% { top: -0px; }
    100% { top: -0px;   }
  }

  @-o-keyframes move {
    0%  { top:  0px;   }
    20% { top: -56px;  }
    40% { top: -110px; }
    60% { top: -167px; }
    80% { top: -0px; }
    100% { top: -0px;   }
  }

 @-ms-keyframes move {
    0%  { top:  0px;   }
    20% { top: -56px;  }
    40% { top: -110px; }
    60% { top: -167px; }
    80% { top: -0px; }
    100% { top: -0px;   }
  }

  @-webkit-keyframes move {
    0%  { top:  0px;   }
    20% { top: -53px;  }
    40% { top: -109px; }
    60% { top: -164px; }
    80% { top: -0px;   }
    100% { top: -0px;  }
  }

  @keyframes move {
    0%  { top:  0px;   }
    20% { top: -56px;  }
    40% { top: -110px; }
    60% { top: -167px; }
    80% { top: -0px; }
    100% { top: -0px;   }
  }
  /*******************************/