[CSS]スクリプト無しで実装できる、アニメーションで表示・非表示する通知パネル

通知パネルをフェードのアニメーションで表示し、一定の時間が経ったら非表示にするスタイルシートのチュートリアルを紹介します。

Timed Notifications with CSS Animations

[ad#ad-2]

• デモ
• 実装

デモ

デモはCSS3アニメーションに対応したFirefox, Chrome, Safariでご覧ください。

デモページ

青いボタン「Active me」をクリックすると、通知パネルが表示されます。

デモページ：通知パネルの表示

[ad#ad-2]

各パネルには表示時間をあらわすプログレスバーが下部に配置されています。
バーがいっぱいになると、非表示になります。

デモページ：通知パネル拡大

実装

実装のポイントを紹介します。

HTML

パネルはdiv要素で実装し、パラグラフとバーを内包しています。

<div class="tn-box tn-box-color-1">
	<p>Your settings have been saved successfully!</p>
	<div class="tn-progress"></div>
</div>

CSS

通知パネルの外観のスタイルです。

.tn-box {
    width: 360px;
    position: relative;
    margin: 0 auto 20px auto;
    padding: 25px 15px;
    text-align: left;
    border-radius: 5px;
    box-shadow:
        0 1px 1px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.6); 
    opacity: 0;
    cursor: default;
    display: none;
}
 
.tn-box-color-1{
    background: #ffe691;
    border: 1px solid #f6db7b;
}

続いて、プログレスバーのベースとなるスタイルです。

.tn-progress {
    width: 0;
    height: 4px;
    background: rgba(255,255,255,0.3);
    position: absolute;
    bottom: 5px;
    left: 2%;
    border-radius: 3px;
    box-shadow:
        inset 0 1px 1px rgba(0,0,0,0.05),
        0 -1px 0 rgba(255,255,255,0.6);
}

通知パネルとバーのアニメーションは、キーフレームを使用します。

@keyframes fadeOut {
    0%  { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; transform: translateY(0px);}
    99% { opacity: 0; transform: translateY(-30px);}
    100% { opacity: 0; }
}
@keyframes runProgress {
    0%  { width: 0%; background: rgba(255,255,255,0.3); }
    100% { width: 96%; background: rgba(255,255,255,1); }
}

通知パネルのトリガーとなるボタンもちょっと面白い仕掛けです。
オン・オフの状態は、チェックボックスを使用します。

<input type="checkbox" class="fire-check" />
<button class="fire">Activate me</button>

チェックボックスの状態で通知パネルのスタイルを変更します。

input.fire-check:checked ~ section .tn-box {
    display: block;
    animation: fadeOut 5s linear forwards;
}
 
input.fire-check:checked ~ section .tn-box .tn-progress {
    animation: runProgress 4s linear forwards 0.5s;
}