【 CSS 】文字がコミカルに踊るアニメーションエフェクト

　こんにちは！　今日のご紹介するエフェクトはこれ！
　文章の中の文字がコミカルに動き出しているアニメーションです。😀
　見ていても楽しくなりますね。

単純なんだけれど、おもしろい 　(⋈◍＞◡＜◍)。✧♡

　映画で『トイ・ストーリー』がありますが、人間には知られずにオモチャが自分の意志を持ちながら動き出すのに対して、文章の中の文字達が気ずかれずに遊びだすようなイメージです。

See the Pen XWdgyPq by bens-user (@ben1099user) on CodePen.

💻📲 ben1099url.starfree.jp/0019.html ( DEMO )

HTML 内のタグに文章を記してありますが、ご存じの通り「ブロック要素」のタグですので、高さや幅を指定したり、要素自体を自由にアニメーションのように動かす事ができます。しかし、タグで囲まれた文字全体が動いてしまいます。また、一部の文字だけをブロック要素で囲むと、そこからは改行になってしまいます。
文字列を崩さず並んだ状態を保つにはどうしたらいいものか。

 ～ で囲めば文字列を崩さずに済むのに💦

改行されず文字列を保つのには、 タグがありますが、残念ながら「インライン要素」のタグなので、この性質に囲まれた要素は移動することが出来ません。
　でも何とかして文字の一部だけ動かすのには？

要素の性質を変える

CSS 内で 　要素を「display:inline-block;」にさせて指定した要素だけを「インラインとブロックレベルの中間」の性質にすることが出来ます。そうすることで、インラインのままで改行されず、ブロックのように移動も可能になりますね。
　タグにはposition:relative; とし、タグには position:position: absolute;　にさせます。
　ただそのままだと、で囲まれた文字は無視された状態で文字が左から詰まった状態になってしまうので、移動させる文字の間隔だけ「 」でブランクを保たせています。
すごく単純な手法ですけれど・・・😓