入力するとデモ・コード・AIプロンプトが全て即座に書き換わります。
.skeleton-card {
width: 520px;
padding: 1.5rem;
}
.skeleton {
height: 14px;
background: linear-gradient(
90deg,
#E5E5E5 0%,
#F5F5F5 50%,
#E5E5E5 100%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
margin-bottom: 14px;
}
.skeleton.title { height: 22px; width: 60%; margin-bottom: 24px; }
.skeleton.short { width: 65%; }
.skeleton.medium { width: 85%; }
.skeleton.full { width: 100%; }
.skeleton.last { width: 40%; margin-bottom: 0; }
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton { animation: none; background: #E5E5E5; }
}※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
コンテンツの骨組みが脈打つように表示される。読み込み中の空白を、空間そのものの予告編に変える。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
データ取得待ち・画像や動画の読み込み中・ページ遷移中など、待ち時間のつなぎに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。