一瞬背景色(background-color)をピカッとフラッシュさせたい！CSSとJavascript初心者の勉強

Javascriptで簡単なゲームを作ってみているのですが、一瞬背景色をピカッとフラッシュさせたいことがありました。
調べてみると色々な方法があったので、まとめてみます。

CSSのみで行う方法は以下にまとめています。

CSSだけでクリックやホバー時にbackground-colorをピカッとフラッシュさせたい！HTMLとCSSの勉強！ クリックした時に画面をピカッとフラッシュさせたいなと思うことがありました。クリック時だからなんの疑いもなくJavascriptで行おう...

クリック時にフラッシュ(Javascript and CSS)

CSSとJavascriptを使って、フラッシュさせます。

DEMO

See the Pen by Nakamoto (@programmerlife) on CodePen.

HTML

<div class="bg"></div>
<button class="btn">Button</button>

CSS

*{
    margin:0;
}
.bg{
    position: absolute;
    background-color:#4169e1;
    width:100%;
    height:100%;
}
.btn{
    position: absolute;
    top:10px;
    left:10px;
}
.flash{
    background-color:#879bd8;
}

Javascript

document.querySelector(".btn").onclick = function () {
    const bg = document.querySelector(".bg");
    bg.classList.add("flash")
    // 50ミリ秒後に外す
    setTimeout(function() {
        bg.classList.remove('flash');
    }, 50);
};

jQueryでフラッシュ

See the Pen by Nakamoto (@programmerlife) on CodePen.

HTML

<div class="bg"></div>
<button class="btn">Button</button>

CSS

*{
    margin:0;
}
.bg{
    position: absolute;
    background-color:#4169e1;
    width:100%;
    height:100%;
}
.btn{
    position: absolute;
    top:10px;
    left:10px;
}

jQuery

$(".btn").on("click", function () {
    $(".bg").fadeOut(50).fadeIn(50).fadeOut(50).fadeIn(50);
});

おわり

動きをつけるのも慣れてくると色々できて楽しいですね。

参考サイト

https://www.codegrepper.com/code-examples/javascript/jquery+flashing+background+color