アニメーションを極めるための１日目（フェードイン）

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

今日からアニメーションを極めるために１日１アニメーションを始めていきます。
期限はとりあえず１か月。極めたいくせに１ヶ月かよって感じですが、とにかくやり続けてみようの１ヶ月です。

最初は基礎的なアニメーションにしてnoteにあげる練習をしていきます。
それに基礎、大事ですしね。

そんな初日はフェードイン。
小学校か中学校の授業でパワーポイントのフェードインを知って
「かっこいい！！！！」
となったのを覚えています。とにかくなんでもフェードイン。

フェードイン（下から）

今回は出現時に下からフェードインするように設定しました。

設定

不透明度を０にしたのがポイントです。
徐々に透明度があがることで「ふわり」という表現がしっくりくるようなアニメーションになりました。
もう少し余裕のあるフェードインにしたい場合は時間を長くしてもいいかもしれません。
あとイージングはデフォルトのままです。もっと動きを「ふんわり」にさせたいときは「ease-out」がおすすめです。

今日はフェードインでした。
始めたばかりなので、温かい目で見守っていただけると嬉しいです。
ではまた明日、よろしくお願いします。