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

今日は、ボタンをクリックすると要素がフェードインしてくる方法を、jqueryのfadeinを使わず、CSS3のkeyframesを使って実行してみます。
ある要素をdisplay:noneの状態からdisplay:blockにしたときに、ふわっと表示させるためには、animationプロパティを使います。
animation-nameに任意の名前を設定し、@keyframesでアニメーションの開始から終了までの経過を0%から100%で設定します。
同時にopacityプロパティで透過度を設定することで、要素がフェードインする動きをつけられます。
「#cilck」のdivをクリックすると「#fadein」のdivに「.visible」のクラスがふられるうごきはjqueryで行ってます。

<html>
<head>
<style>
#click{
        width: 50px;
        height: 30px;
        background: red;
        cursor:pointer;
        text-align: center;
}
#fadein{
        display: none;
        opacity: 0;
        width: 100%;
        height: 200px;
        background: pink;
        text-align: center;
}
.visible#fadein{
        display: block;
        opacity: 1;
        animation-duration: 0.5s;
        animation-name: fade-in;
}
@keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

</style>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script>
$(function(){
        $("#click").click(function(){
                $("#fadein").toggleClass("visible");
        });
});
</script>
</head>
<div id="click"><p>click!</p></div>
<br>
<div id="fadein" ><p>fadeIn box</p></div>
</html>

<html>

<head>

<style>

#click{

width: 50px;

height: 30px;

background: red;

cursor:pointer;

text-align: center;

}

#fadein{

display: none;

opacity: 0;

width: 100%;

height: 200px;

background: pink;

text-align: center;

}

.visible#fadein{

display: block;

opacity: 1;

animation-duration: 0.5s;

animation-name: fade-in;

}

@keyframes fade-in {

0% {

display: none;

opacity: 0;

}

1% {

display: block;

opacity: 0;

}

100% {

display: block;

opacity: 1;

}

</style>

$(function(){

$("#click").click(function(){

$("#fadein").toggleClass("visible");

});

</script>

</head>

<div id="click"><p>click!</p></div>

<br>

<div id="fadein" ><p>fadeIn box</p></div>

</html>

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

click!

fadeIn box

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

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。

【インタビュー】課題であった、UI改善やライターのモチベーションアップができました。―WingArc1st Inc.

2023.07.19 WEB

Category

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

Related article

Pick Up