はじめに

文字などをhoverした時のアニメーションで何かいいエフェクトないですかね・・

文字の間隔をhoverした時に調整して見たらいかがですか？

それは良さそうですね。hoverした際に、文字を掴んでいるようなイメージにもできそうですし

サンプルを作って見ましょうか。

hoverした時に文字間を変更してアニメーションしよう

テキスト文字をhoverした時に文字間を調整するアニメーションをご紹介していきたいと思います。
考え方は、非常に簡単で、hoverした時にletter-spacingをつかって文字間を調整します。
その際、transitionを使うことで、変化までの時間を指定することでより滑らかに文字間が詰まったり広がったりする物を目指します。

サンプルコード

<div class="lt1em">見出し</div>

.lt1em{
 transition:0.5s all;
 letter-spacing:1em;
 text-align:center;
 font-size:24px;
}
.lt1em:hover{
 letter-spacing:0.5em;
 transition:0.5s all;
}

実装例

hoverした時に文字間が詰まるような動きをするようになりました。
このようにすることで、hoverエフェクトした時の文字にしまりが出ますね。