Tom Tom - 13 days ago 10
CSS Question

CSS animate scrolling text using text-indent

I have created an "Important Notice" bar where I want the text to scroll across the screen.

It is achieved by animating the

text-indent
which seemed to work well until I had text which was longer than the width of the screen.

Here's the 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>


And here's my 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%;
}
}
}


The problem I have is that the length of the text in the
.sitemessage
container could be a lot more or a lot less than 100% of the screen width, so using
text-indent
of -100% won't really work.

Any ideas of something I can do without resorting to Javascript or adding to the HTML.

Answer

You can try using transform instead of 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>