DEMO
CODE
<div class="demo-stage agb-stage"><div class="agb-grid"></div><span class="agb-label">ANIMATED GRID</span></div>
.agb-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:300px; overflow:hidden; }
.agb-grid { position:absolute; inset:-50%; background-image:linear-gradient(rgba(233,27,137,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(233,27,137,.25) 1px,transparent 1px); background-size:40px 40px; animation:agb 3s linear infinite; }
@keyframes agb { to { transform:translateY(40px); } }
.agb-label { position:relative; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.25em; font-size:1rem; }
AI PROMPT
格子ラインが無限スクロールする背景をCSSだけで作って。背景要素に2つの linear-gradient（縦線＋横線、1pxラインと透明）を重ね background-size:40px 40px でグリッド化。要素を inset:-50% で大きめに置き、@keyframesで transform:translateY(40px)（=1マス分）を 3s linear infinite。1マス進んで途切れず無限ループ。SaaS・テック系LPのヒーロー背景に。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
格子状のラインが無限にスクロールする背景。SaaS・テック系LPのヒーロー背景に。CSSのみ・軽量。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
ヒーローセクションの背景・セクション区切り・装飾レイヤーなど、空気感づくりに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。