CSS3のkeyframesを使って要素をfadeinさせる方法

今日は、ボタンをクリックすると要素がフェードインしてくる方法を、jqueryのfadeinを使わず、CSS3のkeyframesを使って実行してみます。

ある要素をdisplay:noneの状態からdisplay:blockにしたときに、ふわっと表示させるためには、animationプロパティを使います。
animation-nameに任意の名前を設定し、@keyframesでアニメーションの開始から終了までの経過を0%から100%で設定します。
同時にopacityプロパティで透過度を設定することで、要素がフェードインする動きをつけられます。

「#cilck」のdivをクリックすると「#fadein」のdivに「.visible」のクラスがふられるうごきはjqueryで行ってます。

思ったより簡単にきれいにフェードインの動きができました!!
以下デモです📀



click!

fadeIn box

参考:https://qiita.com/youcune/items/b0bb4c5979071d53eb99