DEMO
CODE
<div class="demo-stage flc-stage"><div class="flc-digit"><span class="flc-cur">0</span></div></div>
.flc-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.flc-digit { width:90px; height:120px; border-radius:14px; background:#1A1A1A; border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:4rem; color:#E91B89; perspective:300px; }
.flc-digit span { display:inline-block; }
.flc-digit span.flip { animation:flc .4s ease; }
@keyframes flc { 0% { transform:rotateX(0); } 50% { transform:rotateX(-90deg); opacity:.3; } 100% { transform:rotateX(0); } }
(function(){
var d = document.querySelector('.flc-cur');
if(!d) return;
var n = 0;
setInterval(function(){
n = (n + 1) % 10;
d.classList.remove('flip'); void d.offsetWidth; d.classList.add('flip');
setTimeout(function(){ d.textContent = n; }, 200);
}, 1200);
})();
AI PROMPT
数字がパタッと縦に反転して切り替わるフリップカウンターを作って。digitに perspective を、数字spanに @keyframes flc（rotateX(0)→rotateX(-90deg)+opacity.3→rotateX(0)）。更新時に flipクラスを外して void offsetWidth で再付与し、アニメ中間(約200ms)で textContent を次の数字に差し替える（裏返った瞬間に値が変わって見える）。タイマー・スコア・在庫数に。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
数字がパタッと縦に反転して切り替わるフリップカウンター。タイマー・スコア・在庫数のリアルタイム表示に。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。
フォーム入力・トグル・ボタン・お気に入りなど、小さな操作に対する手応え（マイクロインタラクション）に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。