【CSS】流れる文字のCSSアニメーションサンプル

2019年6月12日CSS,CSSアニメーション

文字を流れる様にする方法は昔から<marquee>というHTMLタグが存在しますが、随分前より廃止および非推奨となっています

代替案としてCSSで同じ動作が得られ、overflowにmarqueeを設定する方法とanimationでテキスト部分を移動させる方法があります

流れる文字の動作サンプル

See the Pen Flowing Text CSS Animation by yochans (@yochans) on CodePen.

overflowにmarqueeはブラウザ毎に実装状況が異なり情報も見つけにくいので、animationを利用した方が一緒に装飾できたりと自由度も高く簡単だと思います

流れる文字のCSSサンプルコード

.target{
  animation: flowing 8s linear infinite;
  transform: translateX(100%);
}

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

linearにて動作を一定にしています
早く再出現させたい場合は-100%も必要ないと思いますがテキスト量に応じて変更が必要です

2019年6月12日CSS,CSSアニメーション

Posted by Yousuke.U