BLOG

【CSS Tips】マウスオーバーでタイトルが横に流れる！電光掲示板風アニメーション

サイト内のタイトル表示にちょっとした動きを加えたいときに便利な「電光掲示板風アニメーション」のご紹介です。
マウスオーバー時にタイトルテキストが横に流れる仕組みを、CSSだけで手軽に実装できます。

完成イメージ

以下のように、マウスを当てるとタイトルがスライドしていきます。

2025.06.30

電光掲示板のような動きのタイトル

HTML

<a class="article" href="#">
  <div class="date">2025.06.30</div>
  <h4 class="css-title-lide">
	<span>電光掲示板のような動きのタイトル</span>
  </h4>
</a>

CSS

a.article {
  display: block;
  color: #151819;
  text-decoration: none;
  padding: 20px;
  border: solid 1px #000000;
  border-radius: 10px;
  width: 300px;
}

a.article .date {
  font-size: 14px;
  line-height: 1;
  margin-bottom: 10px;
}

a.article .css-title-lide {
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
  position: relative;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

a.article .css-title-lide span {
  display: inline-block;
  padding-right: 1em;
  min-width: 100%;
}

a.article:hover .css-title-lide span {
  animation: titleLide 10s linear infinite;
}

@keyframes titleLide {
  0% {
	transform: translateX(0%);
  }
  100% {
	transform: translateX(-100%);
  }
}

補足ポイント

  • white-space: nowrap; を指定することで、テキストを1行に固定しています。
  • overflow: hidden; によって、はみ出した部分を隠しています。
  • アニメーションは hover 時のみ発火するようにしていますが、常時動かすことも可能です。

活用シーン

記事一覧やニュース一覧などで、タイトルが長くなりがちな場合におすすめ。表示スペースを節約しながら、ちょっとしたアニメーションで注目を集めることができます。

まとめ

JavaScriptを使わずに、CSSだけで動きを加えられるこのテクニック。ちょっとした演出にぜひ活用してみてください！

BACK