CSS使用文本缩进对滚动文本进行动画处理

Question

我已经创建了一个“重要通知”栏，我希望文本在屏幕上滚动。

它是通过动画的text-indent实现的，这似乎工作得很好，直到我有比屏幕宽度更长的文本。

下面是HTML：

<div class="sitemessage">
    dfgh hgsl;k sfghjh fgdlj dflgh sg jls sdfhsdkjldfjksg sdfg ksjdfhg klsjdfhg lksjdfhg klsjdhg lksjdhfg sldkfjgh sdflgkjsdfglk jsdfg klsdfgl jksdfgl jksdfg ljsdfgkjl dafglkj adfgkl sdfgkjh sdfgkhl sdfg kjlsdfgk lsdfgk jl sdfgkl adfgkl adfgklj sdfgklhj sdfgkl jdfg kljafdg ljkdfg klsdfgkhjl sdfgk jlsdfgkhj dfgkhl adfgkj adfkljg a
</div>

下面是我的CSS：

.sitemessage {
    width:100%;
    max-width: 960px;
    margin:auto;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 965px;
    animation: floatText 15s infinite linear;
}

.sitemessage:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@-webkit-keyframes floatText{
    from {
        text-indent: 100%;
    }

    to {
        text-indent: -100%;
    }
}

@media screen and (min-width: 960px) {
    @-webkit-keyframes floatText{
        from {
            text-indent: 960px;
        }

        to {
            text-indent: -100%;
        }
    }
}

我遇到的问题是，.sitemessage容器中的文本长度可能比屏幕宽度的100%大得多，也可能比屏幕宽度的100%小得多，所以使用-100%的text-indent不会真正起作用。

任何我不需要求助于Javascript或添加到HTML中就可以实现的想法。

Answer 1

您可以尝试使用transform而不是text-indent。

​

.sitemessage {
  display: inline-block;
  white-space: nowrap;
  animation: floatText 15s infinite linear;
  padding-left: 100%; /*Initial offset*/
}
.sitemessage:hover {
  animation-play-state: paused;
}
@keyframes floatText {
  to {
    transform: translateX(-100%);
  }
}

<div class="sitemessage">
  START dfgh hgsl;k sfghjh fgdlj dflgh sg jls sdfhsdkjldfjksg sdfg ksjdfhg klsjdfhg lksjdfhg klsjdhg lksjdhfg sldkfjgh sdflgkjsdfglk jsdfg klsdfgl jksdfgl jksdfg ljsdfgkjl dafglkj adfgkl sdfgkjh END
</div>

​