点滅表示 デザイン見本
CSS の @keyframes と opacity、JavaScript の setInterval() を使ってテキストや要素を点滅させる実装パターンをまとめたデモページです。コピーしてすぐに使えるコードを掲載しています。
① フワッとゆっくり点滅 — opacity アニメーションの基本
CSSのみで自動アニメーション
<p class="custom-blink">フワッと点滅します。</p>.custom-blink {
animation: blink-slow 1s ease-in-out infinite alternate;
}
@keyframes blink-slow {
0% { opacity: 0; }
100% { opacity: 1; }
}@keyframes で opacity: 0（透明）から opacity: 1（不透明）への変化を定義し、animation に infinite alternate を指定することで、フェードイン→フェードアウトを繰り返します。alternate を付けると再生方向が交互に反転するため、途切れなくなめらかな往復点滅になります。
② チカチカと素早く点滅 — animation-timing-function: linear
CSSのみで自動アニメーション
<p class="custom-blink">チカチカと点滅します。</p>.custom-blink {
animation: blink-fast 0.3s linear infinite;
}
@keyframes blink-fast {
0% { opacity: 0; }
20% { opacity: 1; }
}animation-duration: 0.3s（0.3秒）の短い周期と timing-function: linear（等速）を組み合わせてチカチカした急激な点滅を作ります。@keyframes の 20% までに素早く opacity: 1 に達し、残りの 80% で急に暗くなることで鋭い点滅感が生まれます。
③ デジタル点滅 — setInterval で瞬時に切り替え
状態: 停止中
<p class="custom-blink">1秒間隔で点滅します。</p>.custom-blink {
visibility: visible;
}
.custom-blink.hidden {
visibility: hidden;
}const blinkEl = document.querySelector('.custom-blink');
let visible = true;
function blink() {
visible = !visible;
blinkEl.style.visibility = visible ? 'visible' : 'hidden';
}
setInterval(blink, 1000);CSS アニメーションではフワッとしたアナログな動きになりますが、setInterval() を使って visibility を hidden↔visible で切り替えることで、瞬時に表示・非表示が切り替わるデジタルな点滅が実現できます。display: none と異なり visibility: hidden はレイアウト上の領域を保持したまま表示だけを消せるため、周囲のレイアウトが崩れません。
④ clearInterval で点滅速度を変更
状態: 停止中
<p class="custom-blink">速度を変えて点滅します。</p>
<input type="range" id="speed-slider" min="200" max="2000" step="100" value="1000">.custom-blink {
visibility: visible;
}
#speed-slider {
display: block;
margin: 16px auto;
width: 200px;
cursor: pointer;
}const blinkEl = document.querySelector('.custom-blink');
const slider = document.getElementById('speed-slider');
let timer = null;
let visible = true;
function blink() {
visible = !visible;
blinkEl.style.visibility = visible ? 'visible' : 'hidden';
}
function start(ms) {
if (timer) clearInterval(timer);
timer = setInterval(blink, ms);
}
slider.addEventListener('input', function() {
start(Number(this.value));
});
start(1000);点滅速度を変えるには、clearInterval(timer) で現在のタイマーをキャンセルしてから、新しい間隔で setInterval() を呼び直します。timer 変数にタイマーIDを保存しておくことが重要です。保存しておかないと後からキャンセルできなくなります。スライダーの値を変えるたびに start() を呼び直すことで、任意の速度にリアルタイムで変更できます。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
