css3实现文字无缝隙上下滚动

1，html代码

<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>

2，css代码

 .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;   }
  }