骑自行车的文本动画css

Question

我想为文本列表制作文本循环效果

这是我到目前为止所尝试的内容：

 .descslider{
     text-align: center;
     position: relative;
     height: 200px;
     overflow: hidden;
     margin: 0;
     padding: 0;
}
 .descslider li{
     width: 100%;
     list-style-type: none;
     position: absolute;
     height: 200px;
     top: -215px;
     text-align: center;
}
 .descslider li#first {
     animation: cycle 12s ease-out infinite;
}
 .descslider li#second {
     animation: cycletwo 12s ease-out infinite;
}
 .descslider li#third {
     animation: cyclethree 12s ease-out infinite;
}
/* ANIMATION */
 @keyframes cycle {
     0% {
         top: -205px;
         opacity:1
    }
     6% {
         top: 0px;
         opacity:1
    }
     26% {
         top: 0px;
         opacity:1;
         z-index:20;
    }
     33% {
         top: 205px;
         opacity: 0;
         z-index: 20;
    }
     34% {
         top: -205px;
         opacity: 0;
         z-index: -1;
    }
     92% {
         top: -205px;
         opacity: 0;
         z-index: 20;
    }
     96% {
         top: -205px;
         opacity: 0;
    }
     100%{
         top: -205px;
         opacity: 0;
    }
}
 @keyframes cycletwo {
     0% {
         top: -205px;
         opacity: 0;
    }
     26% {
         top: -205px;
         opacity: 0;
    }
     32% {
         top: 0px;
         opacity: 1;
    }
     38% {
         top: 0px;
         opacity: 1;
    }
     56% {
         top: 0px;
         opacity: 1;
         z-index: 20;
    }
     62% {
         top: 205px;
         opacity: 0;
         z-index: 20;
    }
     63% {
         top: -205px;
         opacity: 0;
         z-index: -1;
    }
     100%{
         top: -205px;
         opacity: 0;
         z-index: -1;
    }
}
 @keyframes cyclethree {
     0% {
         top: -205px;
         opacity: 0;
    }
     56% {
         top: -205px;
         opacity: 0;
    }
     62% {
         top: 0px;
         opacity: 1;
    }
     68% {
         top: 0px;
         opacity: 1;
    }
     86% {
         top: 0px;
         opacity: 1;
    }
     92% {
         top: 205px;
         opacity: 0;
         z-index: 20;
    }
     93% {
         top: -205px;
         opacity: 0;
         z-index: -1;
    }
     100%{
         top: -205px;
         opacity: 0;
         z-index: -1;
    }
}

<ul class="descslider">
    <li id="first">
        <h3>Batik</h3>
        <p class="lead">Color</p>
        <hr>
        <p class="desc">DESCRIPTION 1</p>
    </li>
    <li id="second">
        <h3>Batik</h3>
        <p class="lead">Design</p>
        <hr>
        <p class="desc">DESCRIPTION 2</p>
    </li>
    <li id="third">
        <h3>Batik</h3>
        <p class="lead">Theme</p>
        <hr>
        <p class="desc">DESCRIPTION 3</p>
    </li>
</ul>

您可以在此处查看完整代码： https://jsfiddle.net/08r36bc8/1/

我想让动画效果如下所示： 的 http://ihuntington.co/

如何仅使用css制作文本动画？ 感谢