DEMO
CODE
<div class="demo-stage"><label class="cb-wrap"><input type="checkbox"><span class="cb-box"></span><span class="cb-label">利用規約に同意する</span></label></div>
.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; }
.cb-wrap { display:flex; align-items:center; gap:1rem; cursor:pointer; font-family:'Oswald',sans-serif; letter-spacing:.1em; color:#1A1A1A; user-select:none; }
.cb-wrap input { display:none; }
.cb-box { width:34px; height:34px; border:2px solid #5A5A5A; border-radius:8px; position:relative; transition:background .3s ease, border-color .3s ease; flex-shrink:0; }
.cb-box::after { content:""; position:absolute; left:11px; top:4px; width:8px; height:15px; border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg) scale(0); transition:transform .3s cubic-bezier(.68,-.55,.27,1.55); }
.cb-wrap input:checked + .cb-box { background:#E91B89; border-color:#E91B89; }
.cb-wrap input:checked + .cb-box::after { transform:rotate(45deg) scale(1); }
.cb-label { font-size:.95rem; }
AI PROMPT
アニメ付きカスタムチェックボックスを作って。本物のinputはdisplay:none、隣の.cb-boxを四角い枠にする。チェックマークは::afterの右下border 2辺をrotate(45deg)で作り、初期scale(0)。input:checked + .cb-boxで背景ピンク化、::afterをscale(1)へcubic-bezier(.68,-.55,.27,1.55)で弾ませる。labelで全体クリック可。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
チェック時にチェックマークが弾むように描かれるカスタムチェックボックス。フォームの入力体験を向上。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
フォーム入力・トグル・ボタン・お気に入りなど、小さな操作に対する手応え（マイクロインタラクション）に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。