CSSだけでクリックやホバー時にbackground-colorをピカッとフラッシュさせたい！HTMLとCSSの勉強！

クリックした時に画面をピカッとフラッシュさせたいなと思うことがありました。クリック時だからなんの疑いもなくJavascriptで行おうと思ったのですが、CSSでもできることを知ったので備忘録としてまとめます。

同じCSSを使い回すことでいろいろなシチュエーションに対応できそうです。

背景をフラッシュ

背景をフラッシュさせてみます。

Demo

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

HTML & CSS

Codepenにも書いてありますが、HTMLとCSSを以下に書き出します。

HTML

<div class="bg flash">

CSS

*{
    margin:0;
}

.bg{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color:#4169e1;
}

.flash {
    position: absolute;
    height: 100%;
    width: 100%;
}
.flash:active {
    animation: flash 50ms;
}
@keyframes flash {
    0% {
        background: black;
        z-index: 100;
    }
    50% {
        background: black;
        z-index: 100;
    }
    50.1% {
        background: white;
        z-index: 100;
    }
    100% {
        background: white;
        z-index: 100;
    }
}

色などはお好みで。

フラッシュアニメーション例2

CSSのキーフレームの他の例です。こちらの方がシンプルでいいかもしれないですね。
keyframesの中身を変えることで好みのフラッシュが作れます。

DEMO

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

CSS

@keyframes flash {
    0% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

全ての例でも置き換えて使用可能です。

ボタンでフラッシュ

上記のフラッシュを応用するとボタンをクリックすればフラッシュすることも可能です。

DEMO

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

HTML & CSS

Codepenにも書いてありますが、HTMLとCSSを以下に書き出します。

HTML

<div class="area">
    <a href="#" class="btn btn--blue flash">PUSH</a>
</div>

CSS

*{
    margin:0;
}
.bg{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color:#4169e1;
}
.flash {
    position: absolute;
    height: 100%;
    width: 100%;
}
.flash:active {
    animation: flash 50ms;
}

@keyframes flash {
    0% {
        background: black;
        z-index: 100;
    }
    50% {
        background: black;
        z-index: 100;
    }
    50.1% {
        background: white;
        z-index: 100;
    }
    100% {
        background: white;
        z-index: 100;
    }
}

hoverでフラッシュ

hover時にフラッシュさせてみます。

DEMO

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

HTML & CSS

Codepenにも書いてありますが、HTMLとCSSを以下に書き出します。

HTML

<div class="area"><div class="bg flash"></div></div>

CSS

* {
  margin: 0;
}

.area {
  display: flex;
  justify-content: center;
}
.bg {
  position: absolute;
  height: 200px;
  width: 300px;
  background-color: #4169e1;
  margin: 10px auto;
}

/* Flashing */
.flash:hover{
  opacity: 1;
  -webkit-animation: flash 50ms;
  animation: flash 50ms;
}


@keyframes flash {
    0% {
        background: black;
        z-index: 100;
    }
    50% {
        background: black;
        z-index: 100;
    }
    50.1% {
        background: white;
        z-index: 100;
    }
    100% {
        background: white;
        z-index: 100;
    }
}

おわり

keyframeを覚えるとなんか面白そうですね。CSSがあればJavascriptなくても結構追い込めるのも驚きでした。

Javascriptを使用してフラッシュさせる方法については以下にまとめています。

一瞬背景色(background-color)をピカッとフラッシュさせたい！CSSとJavascript初心者の勉強 Javascriptで簡単なゲームを作ってみているのですが、一瞬背景色をピカッとフラッシュさせたいことがありました。調べてみると色々な...