[CSS]特定のエリアだけをアニメーションで一瞬目立たせるテクニック

サイト構築 -CSS

Post on:2011年9月26日

sponsorsr

編集可能なページなどで変更した箇所を分かりやすくするために、ターゲットされるとそのエリアだけをフェードのアニメーションで一瞬目立たせるスタイルシートのテクニックを紹介します。

Yellow Fade Technique with CSS Animations

[ad#ad-2]

このテクニックが広まったのは「Basecamp」のイエローフェードが有名で、JavaScriptを使用して特定のエリアをイエローにハイライトして目立たせます。

Basecampの紹介記事：: Web Interface Design Tip: The Yellow Fade Technique

同様のテクニックをCSS3で実装する方法を紹介します。

CSS

ターゲットされるとそのエリアの背景色が黒から、透明に変更します。

/**
 * Quick fade on target to attract user attention
 */

:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}

[ad#ad-2]

デモページを作ってみました。
対応ブラウザはChrome, Safari, Firefoxです。