在CSS中使用关键帧文本动画时如何设置填充文本

Question

我有一个文本向上/向下滑动动画。

文字动画时出现填充问题。

当动画在中心显示不正确时，显示文本。

我希望所有文字都应显示在中间。

您可以在此处查看代码：

 .flipword { color: #999; text-transform: uppercase; font-size: 36px; font-weight: bold; /* padding-top: 200px; */ /* position: fixed; */ padding-bottom: 15px; width: 100%; bottom: 45%; display: block; } #flip { height: 65px; overflow: hidden; } #flip>div>div { color: #fff; padding: 4px 12px; height: 60px; margin-bottom: 45px; display: inline-block; } #flip div:first-child { animation: show 10s linear infinite; } #flip div div { background: #42c58a; } #flip div:first-child div { background: #4ec7f3; } #flip div:last-child div { background: #DC143C; } @keyframes show { 0% { margin-top: -270px; } 5% { margin-top: -180px; } 33% { margin-top: -180px; } 38% { margin-top: -90px; } 66% { margin-top: -90px; } 71% { margin-top: 0px; } 99.99% { margin-top: 0px; } 100% { margin-top: -270px; } } 

 <div class="flipword"> <div id="flip"> <div><div>Not Center</div></div> <div><div>Is Center</div></div> <div><div>Not Center</div></div> </div> </div> 

Answer 1

您的CSS应该是这样的。 看看https://jsfiddle.net/tamvo/m25b1vLa/

.flipword {
    color: #999;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: bold;
    /* padding-top: 200px; */
    /* position: fixed; */
    padding-bottom: 15px;
    width: 100%;
    bottom: 45%;
    display: block;
}

#flip {
    height: 65px;
    overflow: hidden;
}

#flip>div>div {
    color: #fff;
    padding: 4px 12px;
    height: 60px;
    margin-bottom: 45px;
    display: inline-block;
}

#flip div:first-child {
    animation: show 10s linear infinite;
}

#flip div div {
    background: #42c58a;
}

#flip div:first-child div {
    background: #4ec7f3;
}

#flip div:last-child div {
    background: #DC143C;
}

@keyframes show {
    0% {
        margin-top: -270px;
    }
    5% {
        margin-top: -180px;
    }
    33% {
        margin-top: -180px;
    }
    38% {
        margin-top: -90px;
    }
    66% {
        margin-top: -90px;
    }
    71% {
        margin-top: 0px;
    }
    99.99% {
        margin-top: 0px;
    }
    100% {
        margin-top: -270px;
    }
}

Answer 2

看一看：

 .flipword { color: #999; text-transform: uppercase; font-size: 36px; font-weight: bold; /* padding-top: 200px; */ /* position: fixed; */ padding-bottom: 15px; width: 100%; bottom: 45%; display: block; } #flip { height: 65px; overflow: hidden; } #flip>div>div { color: #fff; padding: 4px 12px; height: 57px; line-height: 65px; margin-bottom: 45px; display: inline-block; } #flip div:first-child { animation: show 10s linear infinite; } #flip div div { background: #42c58a; } #flip div:first-child div { background: #4ec7f3; } #flip div:last-child div { background: #DC143C; } @keyframes show { 0% { margin-top: -194px; } 5% { margin-top: -194px; } 33% { margin-top: -194px; } 38% { margin-top: -92px; } 66% { margin-top: -92px; } 71% { margin-top: -2px; } 99.99% { margin-top: -2px; } 100% { margin-top: -194px; } } 

 <div class="flipword"> <div id="flip"> <div><div>Not Center</div></div> <div><div>Is Center</div></div> <div><div>Not Center</div></div> </div> </div>