css 信息栏上下轮播

css实现信息栏上下滚动轮播

    <div class="container">
        <div class="tagline">
            <span class="change-container">
                <span class="changing">
                    张**   189******17  2小时前
                </span>
                <span class="changing">
                    陈**   137******06  3分钟前
                </span>
                <span class="changing">
                    徐**   150******82   2天前

                </span>
                <span class="changing">
                    屈**  131******75  1天前
                </span>
                <span class="changing">
                    第**  199******99  3分钟前
                </span>
            </span>
        </div>
    </div>

* {
	margin: 0;
	padding: 0;
}
.container {
	 background: #eee;
	 margin-top: 10px;
	 text-align: center;
	 height: 1.9375rem;
	 line-height: 1.9375rem;
	 margin-bottom: 10px;
}
.tagline {
   text-align: center;
}

.change-container {
   position: relative;
   display: inline-block;
   width: 100%;
   height: 1.9375rem;
   text-align: center;
   margin-top: -5px;
}

/* 执行动画所有时间以及样式 */
.changing {
   position: absolute;
   overflow: hidden;
   display: inline-block;
   width: 100%;
   left: 0;
   bottom: 0;
   height: 0;
   opacity: 0;
   font-size: 16px;
   line-height: 16px;
   text-rendering: optimizeLegibility;
   -webkit-animation: revealNextWord 10s ease-in-out infinite;
   animation: revealNextWord 10s ease-in-out infinite;
}
/* 子类执行动画时间 */
.changing:nth-child(2) {
   -webkit-animation-delay: 2s;
   animation-delay: 2s;
}

.changing:nth-child(3) {
   -webkit-animation-delay: 4s;
   animation-delay: 4s;
}

.changing:nth-child(4) {
   -webkit-animation-delay: 6s;
   animation-delay: 6s;
}

.changing:nth-child(5) {
   -webkit-animation-delay: 8s;
   animation-delay: 8s;
}
/* 子类弹出动画效果 */
@-webkit-keyframes revealNextWord {
   0% {
       opacity: 0.3;
       height: 0;
   }

   10% {
       opacity: 1;
       height: 1.2em;
   }

   20% {
       opacity: 1;
       height: 1.2em;
   }

   28% {
       opacity: 0;
       height: 2em;
   }

   100% {
       opacity: 0;
   }
}

@keyframes revealNextWord {
   0% {
       opacity: 0.3;
       height: 0;
   }

   10% {
       opacity: 1;
       height: 1.2em;
   }

   20% {
       opacity: 1;
       height: 1.2em;
   }

   28% {
       opacity: 0;
       height: 2em;
   }

   100% {
       opacity: 0;
   }
}

效果图