only four word rotate

by Gulam Jilani

HTML

<h2 class="rotate-text">
        <span>Everything we love about</span>
        <span>
            Portland<br />
            Seattle<br />
            San Fransisco<br />
            Detroit<br />
            gulam<br />
            jilani<br />
            khan
        </span>
    </h2>

CSS

.rotate-text {
            font: normal 2.5em/1.2 sans-serif;
            color: #A4BB28;
            height: 1.2em;
            width: 100%;
            position: relative;
            overflow: hidden;
            padding: 0 0 .1em 0;
        }
            .rotate-text > span {
                float: left;
                margin-right: .3em;
                height: 1.2em;
            }
   .rotate-text > span:last-of-type {
      font-weight:500;
      display:inline-block;
      color:#5A8243;
      
      position: relative;
      white-space: nowrap;
      bottom: 0;
      left: 0;
      
      animation: ticker 10s;
      animation-iteration-count: infinite;
      animation-delay: 4s;}
@keyframes ticker {
  0%  { bottom: 0; }
  10% { bottom: 0; }
  20% { bottom: 1.2em; }
  30% { bottom: 1.2em; }
  40% { bottom: 2.4em; }
  50% { bottom: 2.4em; }
  60% { bottom: 3.6em; }
  70% { bottom: 3.6em; }
}