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

KOHIMOTO LABO

東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。

【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。

2024.06.09 プロジェクト

Category

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

Related article

Pick Up