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

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

文本动画时，我有填充问题

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

我希望所有文本都显示在中间

您可以在此处看到代码：

.flipword{
颜色：#999；
文本转换：大写；
字体大小：36px；
字体大小：粗体；
/*填充顶部：200px*/
/*位置：固定*/
垫底：15px；
宽度：100%；
底部：45%；
显示：块；
}
#翻转{
高度：65px；
溢出：隐藏；
}
#翻转>分割>分割{
颜色：#fff；
填充：4px12px；
高度：60px；
边缘底部：45像素；
显示：内联块；
}
#第一个孩子{
动画：显示10s线性无限；
}
#翻盖{
背景：#42c58a；
}
#翻转div：第一个子div{
背景：#4ec7f3；
}
#翻转div：最后一个子div{
背景：#DC143C；
}
@关键帧显示{
0% {
利润上限：-270px；
}
5% {
利润上限：-180px；
}
33% {
利润上限：-180px；
}
38% {
利润上限：-90px；
}
66% {
利润上限：-90px；
}
71% {
边际上限：0px；
}
99.99% {
边际上限：0px；
}
100% {
利润上限：-270px；
}
}

非中心
是中心
非中心

您的css应该是这样的。看看

看看：

.flipword{
颜色：#999；
文本转换：大写；
字体大小：36px；
字体大小：粗体；
/*填充顶部：200px*/
/*位置：固定*/
垫底：15px；
宽度：100%；
底部：45%；
显示：块；
}
#翻转{
高度：65px；
溢出：隐藏；
}
#翻转>分割>分割{
颜色：#fff；
填充：4px12px；
高度：57px；
线高：65px；
边缘底部：45像素；
显示：内联块；
}
#第一个孩子{
动画：显示10s线性无限；
}
#翻盖{
背景：#42c58a；
}
#翻转div：第一个子div{
背景：#4ec7f3；
}
#翻转div：最后一个子div{
背景：#DC143C；
}
@关键帧显示{
0% {
利润上限：-194px；
}
5% {
利润上限：-194px；
}
33% {
利润上限：-194px；
}
38% {
利润上限：-92px；
}
66% {
利润上限：-92px；
}
71% {
页边顶部：-2px；
}
99.99% {
页边顶部：-2px；
}
100% {
利润上限：-194px；
}
}

非中心
是中心
非中心

你能解释关于你答案的更多信息吗？@vanloc：添加到小提琴上的注释，你可以查看。如果不清楚，我就用越南语：））

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