上下左右から表示されるテキストのCSSアニメーション 8選
上下左右からテキストを動かしてみよう！
今回はテキストアニメーションの中でも上下左右から出現するような実装をご紹介していこうと思います。
見出しだけでなく、オープニングにも使えるようなものも多いので、ぜひチェックして取り入れてみてください。
前回はjsを使ったおしゃれなテキストアニメーションについてご紹介していますので、気になる方はこちらも読んでみてください。
よく読まれている記事
テキストアニメーションを使ったことがない方でも簡単にコピペできるように、CSSアニメーションのみにしてみました。
それではいっしょに実装していきましょう♪
上からスライドインするテキスト
上からシュッとスライドして登場するアニメーションです。
よく見るようなスタンダードなスライドインするテキストは、シンプルなのでどこでも使えて便利です。
スライドの速さを調整して使ってみてください。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
下からスライドインするテキスト
下からシュッとスライドして登場するアニメーションです。
タイトルでは見かけないですが、オープニングテキストで使うとおしゃれですね。
ランクアップのような表現をしたいときに使うといいですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
左からスライドインするテキスト
左からシュッとスライドして登場するアニメーションです。
あまり使うことはないと思いますが、テキストだけでなく画像をスライドしてもイイですね。
画像の場合はinfinityを消してアニメーションの再生回数が1回にするのがおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
右からスライドインするテキスト
右からシュッとスライドして登場するアニメーションです。
これもあまり使うことはないと思いますが、画像やコンテンツをスライドさせてもイイですね。
左と右を組み合わせて交互に表示させるのがおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
上からフェードインするテキスト
上からふわっととフェードインして登場するアニメーションです。
徐々にテキストが出てくるようなエフェクトはサイトに追加したいおしゃれなアニメーションですね
表示速度をさらに遅くすると高級感が増します。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
下からフェードインするテキスト
下からふわっととフェードインして登場するアニメーションです。
普段見そうで見ないアニメーションなので、差別化できそうでいいですね。
動画っぽいエフェクトなので、YouTubeと組み合わせても面白いかも。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
左からフェードインするテキスト
左からふわっととフェードインして登場するアニメーションです。
この動きをするテキストは珍しいですが、ロゴに変更してもおしゃれだと思います。
ヘッダーやLPで使ってみたい実装ですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
右からフェードインするテキスト
右からふわっととフェードインして登場するアニメーションです。
この動きもあまり使うときはないかもですが、ユーザーの不意打ちを狙うときはこれですね。
右から表示されるものは少ないので、意外性を演出できます。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
まとめ
上下左右から出てくるテキストアニメーションは、私も普段けっこう使っているなと思いました。
動く範囲が大きい分、ユーザーの目を誘うことができるのでとてもおすすめです。
いろんな方向に動くようなサイトを作ってみても面白そうですが、バランスは難しいかもしれません。
今回の実装を使う場合は、サイト訪問者が嫌にならないように計算して設置することが大事です。
いろんな方向の動きを使って、楽しいサイトを作っていきましょう♪
最後までご覧いただきありがとうございました☆彡