目次
テキストやアイコンに注意を引かせたいときに
ユーザーの視線を引きつけたいときや、「新着」「エラー」など目立たせたい情報があるときに、点滅・点灯するアニメーションは非常に効果的です。CSSの@keyframesを使えば、JavaScriptを使わずに実装できるため、軽量かつ手軽に導入できます。
HTML
|
1 2 3 |
<p class="blinking">重要なお知らせ</p> |
基本CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
.blinking { animation: blink 1s step-start infinite; } @keyframes blink { 50% { opacity: 0; } } |
応用：アイコンを点灯するように見せる
通知アイコンやアラートマークなどを点滅させることで、ユーザーへの注意喚起になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.alert-icon { color: red; animation: flash 0.8s linear infinite; } @keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } |
備考
animationは無限ループを指定（infinite）する必要があります。
点滅が苦手なユーザーへの配慮も必要です。（WCAG考慮）
