CSS 流れるテロップを作る

ニュース番組や駅の電光掲示板で見られる右から左へ流れるテロップを作りました。

テロップその1

html

<div id="wrap">
<div id="telop">
  <p id="flow-text">Hello World!</p>
</div>
</div>

CSS

#wrap{
  width: 100%;
}

#telop{
  position: relative;
  width: 100%;
  height: 1.3em; 
  font-size: 1.5em;
  overflow: hidden;
  background: #000;
  line-height: 1.3em;
}

#flow-text{
  position: absolute;
  top: 0;
  right: -20em; /* 文字数に合わせて変更 */
  color: #fff;
  white-space: nowrap;
  animation: flow 10s linear infinite;
}

@keyframes flow{
  from{
    right: -20em; /* 文字数に合わせて変更 */
  }

  to{
    right: 110%;
  }
}

テロップその2

<div class="telop">Hello world!</div>

.telop{
  white-space: nowrap;
  overflow: hidden;
  animation: flow 10s linear infinite;
}


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

  to{
    /* 文字数に合わせて変更 */
    text-indent: -12em;
  }
}