DEMO
CODE
<div class="demo-stage sc-stage"><div class="sc-control"><span class="sc-thumb"></span><button class="sc-seg active" data-i="0" type="button">Day</button><button class="sc-seg" data-i="1" type="button">Week</button><button class="sc-seg" data-i="2" type="button">Month</button></div></div>
.sc-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.sc-control { position:relative; display:flex; background:#1A1A1A; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:5px; }
.sc-thumb { position:absolute; top:5px; left:5px; height:calc(100% - 10px); width:calc((100% - 10px) / 3); background:#E91B89; border-radius:8px; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.sc-seg { position:relative; z-index:1; border:none; background:transparent; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.08em; font-size:.8rem; padding:.6rem 1.3rem; cursor:pointer; }
(function(){
var segs = document.querySelectorAll('.sc-seg'), thumb = document.querySelector('.sc-thumb');
if(!thumb) return;
segs.forEach(function(s){
s.addEventListener('click', function(){
var i = parseInt(s.dataset.i, 10);
thumb.style.transform = 'translateX(' + (i * 100) + '%)';
segs.forEach(function(x){ x.classList.remove('active'); });
s.classList.add('active');
});
});
})();
AI PROMPT
iOS風セグメント切替を作って。コンテナを position:relative にし、選択インジケーター .thumb を absolute・width:各セグメント幅(=コンテナ内幅/3)。各セグメントのclickで thumb に transform:translateX(index * 100%)（自分の幅単位で移動）。transition に cubic-bezier(.34,1.56,.64,1) で弾性スライド。セグメントは z-index:1 でthumbの上に。期間・表示モードの切替UIに。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
iOS風のセグメント切替。選択中インジケーターが弾性アニメで滑るタブUI。期間・表示モードの切替に。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。
フォーム入力・トグル・ボタン・お気に入りなど、小さな操作に対する手応え（マイクロインタラクション）に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。