Slide text animation using html css

<div class="slide-text">
        <ul>
            <li>Html 5</li>
            <li>Jquery</li>
            <li>Developer</li>
            <li>Designer</li>
            <li>Angular Js</li>
        </ul>
    </div>

body { background: #000;}
       .slide-text { width: 90%; position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);   background: #5b29b9;   padding: 0 40px;
       height: 60px;  overflow: hidden;}
       .slide-text ul { margin: 0; padding: 0; list-style: none;}
       .slide-text ul li { text-transform: uppercase;  text-align: center; font-size: 40px; color:#fff; line-height: 60px;} 
       .slide-text ul li:first-child { animation: slide 15s infinite;}
       
       @keyframes slide {
           0% { margin-top: 0;}
           16% { margin-top: 60px;}
           33% { margin-top: -120px;}
           50% { margin-top: -180px;}
           66% { margin-top: -240px;} 
           82% { margin-top: -300px}
           100% { margin-top: -360px;}
       }