【CSS3】ふわっと始まりふわっと終わる。

お久しぶりです。
すっかりCSS3のアニメーションは当たり前のように使われる時代になりました。
少し意識した組み方をすることで、グッとよくなったりします。

以下のサンプルをご確認ください。

ふわっと現れ、パッと消える - パターン1

f:id:paradox_tm:20180419151120g:plain

cssにてdisplay:noneを使用しているものになります。
パッと切り替わっているので少し目に優しくないのと違和感を感じます。

f:id:paradox_tm:20180419151151g:plain

cssにてvisibility: hidden; ⇄ visibility: visible;でアニメーションをしているもになります。
パターン①より、違和感を感じずスムーズな見え方になります。

display:noneの場合、要素自体なくなってしまうので、アニメーションをさせるのは難しいです。
この場合は、visibility: hidden;を使って要素はあるけど見えない状態をつくることでアニメーションが可能になります。

【少しの記述で表現は変わる。。】

現場からは以上です。