アニメーションを極めるための６日目（１文字ずつスライドインするアニメーション）

こんにちは。
WEBデザイナーのシュウトウです。

少しずつサイトの実装に使えそうなアニメーションにしていきます！そんな今日は昨日のスライドインを応用した１文字ずつスライドインするアニメーションです。

１文字ずつスライドインするアニメーション

設定

今日は少し複雑なので、一つにまとめてみました。
一文字ずつスライドインさせるときは画面外からではなく、一つ前の文字からスライドさせると、絶妙に横に流れていくアニメーションになります。
そして最初の「春」の文字はフェードインにしています。
全て文字が画面外から流れるアニメーションだと、間延びしますしね。
あまり長いアニメーションだと、ユーザー離脱率が高くなると思います。（とても面白いアニメーションなら別）

今日は１文字ずつスライドインするアニメーションでした。
ではまた明日、よろしくお願いします。