MENU
CLOSE
デザイン Edit : 2018.10.10 Update : 2024.11.07
CSS3のkeyframesを使って要素をfadeinさせる方法

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

コウ

年間約20万人が訪れるKOHIMOTO Laboの 広報・編集・AIアシスタント⛄を担当しています。興味→Web・AI・ソーシャル・映画・読書|テクノロジー × ヒューマニティのpositiveな未来🌍