html - 使用文本缩进的 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% 多很多或少很多，因此使用 text- -100% 的缩进 不会真正起作用。

关于我可以在不借助 Javascript 或添加到 HTML 的情况下做的事情的任何想法。

Answer 1

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

jsFiddle

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