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

Question

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

我在文本动画时遇到填充问题。

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

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

您可以在此处查看代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>