@charset "UTF-8"; /* ============================================================ animation.css 制作指示書 P2 のアニメーション①②を担当する追加ファイル。 tokens.css / base.css / style.css には一切手を入れていません。 読み込み順は style.css の後。 スクロール検知は js/animation.js が担当し、 対象要素に .is-inview を付けることで再生されます。 （IntersectionObserver 非対応環境では scroll イベントにフォールバック） transform / opacity / @keyframes のみを使っているため、 IE10 以降の古いブラウザでも動作します。 ============================================================ */ :root { /* ① 出現アニメーション */ --anim-bulk-from-x: -110%; /* 黒バルクが左から入ってくる距離 */ --anim-card-from-y: 70%; /* 白背景＋文字が下から上がる距離 */ --anim-opacity-move: 0.8; /* 移動中の不透明度（指示書：80%） */ --anim-duration: 1.1s; --anim-easing: cubic-bezier(0.22, 0.61, 0.36, 1); --anim-card-delay: 0.45s; /* バルクより遅れて白背景が出るまでの間 */ } /* ============================================================ アニメーション① — CONCEPT 指示書 P2： 1. 黒のバルク（不透明度80%）が左から出現 2. 不透明度100%になり、画像の位置で止まる 3. 下から白背景と文字が出現（不透明度80%） 4. 不透明度100%になり、画像の位置で止まる .is-js は JS が動く環境でのみ に付く。 JSが無効／未対応の場合はこの初期状態が当たらず、 最初から通常表示になる（コンテンツが見えなくなる事故を防ぐため）。 ============================================================ */ /* 移動中にはみ出す分を隠す */ .is-js .p-concept__body { overflow: hidden; } /* --- 初期状態（画面外で待機） --- */ .is-js .p-concept__img { opacity: 0; transform: translateX(-110%); transform: translateX(var(--anim-bulk-from-x)); transition: 0.8s ease; } .is-js .p-concept__card { opacity: 0; transform: translateY(70%); transition: 0.8s ease; transition-delay: 0.5s; /* transform: translateY(70%); transform: translateY(var(--anim-card-from-y)); */ } /* --- 画面に入ったら再生 --- */ .is-js .p-concept__body.is-inview .p-concept__img { /* animation: anim-bulk-in 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; animation-duration: var(--anim-duration); animation-timing-function: var(--anim-easing); */ opacity: 1; transform: translateX(0); } .is-js .p-concept__body.is-inview .p-concept__card { /* animation: anim-card-up 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s forwards; animation-duration: var(--anim-duration); animation-timing-function: var(--anim-easing); animation-delay: var(--anim-card-delay); */ opacity: 1; transform: translateY(0); } /* 黒のバルクが左から出現し、定位置で不透明度100%になる */ @keyframes anim-bulk-in { 0% { opacity: 0.8; transform: translateX(-110%); } 85% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } /* 白背景と文字が下から出現し、定位置で不透明度100%になる */ @keyframes anim-card-up { 0% { opacity: 0.8; transform: translateY(70%); } 85% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } /* ============================================================ アクセシビリティ 「視差効果を減らす」設定時はすべて停止し、通常表示にする ============================================================ */ @media (prefers-reduced-motion: reduce) { .is-js .p-concept__body { overflow: visible; } .is-js .p-concept__img, .is-js .p-concept__card, .is-js .p-concept__body.is-inview .p-concept__img, .is-js .p-concept__body.is-inview .p-concept__card { animation: none !important; opacity: 1; transform: none !important; } .p-product .c-heading::before, .p-product .c-heading::after { animation: none !important; } }