【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%も必要ないと思いますがテキスト量に応じて変更が必要です
ディスカッション
コメント一覧
まだ、コメントがありません