CRT電源オフ（一本の線につぶれて消える）

transition

CRT power-off / TV turn-off effect / screen collapse

ブラウン管の電源を落としたときのように、画面が数回明滅してから横一本の輝いた線につぶれ、最後に点になって消える終わり方。フェードアウトと違って「電源が落ちた」という因果が画に出るので、モーダルやページを閉じる操作に強い意味を持たせられる。

01 — Demo video

Play live →

02 — Prompt template

要素の消え方に CRT power-off(ブラウン管の電源オフ)を実装してください。

- 全体を {{duration}}s で消し切る。内訳は「明滅 → 縦につぶれる → 横につぶれて消える」の3段
- 明滅は brightness() を上下させるCSSアニメーションを steps() で刻み、animation-iteration-count を {{flicker}} にして回数で制御する(0回のときは明滅の段を飛ばす)
- 次に transform: scaleY() で高さを {{line}}% まで一気に潰し、同時に filter: brightness({{flash}}) まで持ち上げて、中央に横一本の輝いた線を残す。イージングは ease-in(最後に加速して潰れる)
- 潰れる要素の中に白い発光レイヤーを1枚重ね、潰れるのと同じ時間で opacity を上げる。暗い画面を scaleY で潰すだけでは「光る線」にならない
- 最後にその線を transform: scaleX() で同じ {{line}}% まで縮めて点にし、opacity 0 へ落とす
- transform-origin は center。height や width のアニメーションでは絶対に作らない(リフローが走り、周囲のレイアウトが動く)
- transform と filter と opacity 以外のプロパティは触らない。潰れる要素には will-change: transform を付ける
- 電源オンはこの逆再生(点 → 横一本の線 → 縦に開いて brightness が 1 に戻る)で、明滅は入れない
- prefers-reduced-motion 時は潰す動きと明滅を一切行わず、opacity のフェードだけで消す

要素の消え方に CRT power-off(ブラウン管の電源オフ)を実装してください。

- 全体を {{duration}}s で消し切る。内訳は「明滅 → 縦につぶれる → 横につぶれて消える」の3段
- 明滅は brightness() を上下させるCSSアニメーションを steps() で刻み、animation-iteration-count を {{flicker}} にして回数で制御する(0回のときは明滅の段を飛ばす)
- 次に transform: scaleY() で高さを {{line}}% まで一気に潰し、同時に filter: brightness({{flash}}) まで持ち上げて、中央に横一本の輝いた線を残す。イージングは ease-in(最後に加速して潰れる)
- 潰れる要素の中に白い発光レイヤーを1枚重ね、潰れるのと同じ時間で opacity を上げる。暗い画面を scaleY で潰すだけでは「光る線」にならない
- 最後にその線を transform: scaleX() で同じ {{line}}% まで縮めて点にし、opacity 0 へ落とす
- transform-origin は center。height や width のアニメーションでは絶対に作らない(リフローが走り、周囲のレイアウトが動く)
- transform と filter と opacity 以外のプロパティは触らない。潰れる要素には will-change: transform を付ける
- 電源オンはこの逆再生(点 → 横一本の線 → 縦に開いて brightness が 1 に戻る)で、明滅は入れない
- prefers-reduced-motion 時は潰す動きと明滅を一切行わず、opacity のフェードだけで消す

要素の消え方に CRT power-off(ブラウン管の電源オフ)を実装してください。

- 全体を {{duration}}s で消し切る。内訳は「明滅 → 縦につぶれる → 横につぶれて消える」の3段
- 明滅は brightness() を上下させるCSSアニメーションを steps() で刻み、animation-iteration-count を {{flicker}} にして回数で制御する(0回のときは明滅の段を飛ばす)
- 次に transform: scaleY() で高さを {{line}}% まで一気に潰し、同時に filter: brightness({{flash}}) まで持ち上げて、中央に横一本の輝いた線を残す。イージングは ease-in(最後に加速して潰れる)
- 潰れる要素の中に白い発光レイヤーを1枚重ね、潰れるのと同じ時間で opacity を上げる。暗い画面を scaleY で潰すだけでは「光る線」にならない
- 最後にその線を transform: scaleX() で同じ {{line}}% まで縮めて点にし、opacity 0 へ落とす
- transform-origin は center。height や width のアニメーションでは絶対に作らない(リフローが走り、周囲のレイアウトが動く)
- transform と filter と opacity 以外のプロパティは触らない。潰れる要素には will-change: transform を付ける
- 電源オンはこの逆再生(点 → 横一本の線 → 縦に開いて brightness が 1 に戻る)で、明滅は入れない
- prefers-reduced-motion 時は潰す動きと明滅を一切行わず、opacity のフェードだけで消す

03 — Params

duration(消え切るまでの時間 s) — 範囲 0.3〜1.4 / 初期 0.62
0.55〜0.75sが実機の感触に近い。0.4s以下だと線につぶれる過程が見えず単なる消滅になり、1sを超えると閉じる操作の待ち時間として長い。
flash(つぶれる瞬間の輝度) — 範囲 1〜5 / 初期 3.5
brightness()の倍率。3〜4倍で「残った電子が中央に集まって光る」ブラウン管らしさが出る。1に近いとただの縦つぶれ、5に近いと白飛びして形が読めない。
line(つぶれ切った線の高さ %) — 範囲 0.2〜6 / 初期 0.6
元の高さに対する割合。0.4〜1%で「線」に見える。3%を超えると帯のままで、線につぶれた印象にならない。
flicker(つぶれる前の明滅回数) — 範囲 0〜4 / 初期 2
電圧が落ちる前のちらつき。2回が定番。0にすると即座につぶれる素直な動きになり、4回は故障・障害の演出寄りになる。

04 — Vocab

scaleY — 縦方向の拡縮。heightのアニメーションと違いレイアウト計算(リフロー)が走らないので、画面が線につぶれても周囲は動かない。
filter: brightness() — 要素の明るさの倍率。1が等倍で、それより大きくすると発光したように見える。つぶれる瞬間だけ跳ね上げるのがブラウン管らしさの正体。
transform-origin — 変形の基準点。centerでないと画面が上端や下端に吸い込まれ、中央に線が残るブラウン管の挙動にならない。
animation-iteration-count — アニメーションの繰り返し回数。明滅のような「N回だけ」の演出は、keyframesを回数分書かずにこれで制御する。
steps() — 変化を指定回数のコマに刻むイージング。電源の明滅を滑らかに補間すると、途端に電気の挙動に見えなくなる。

05 — NG → OK examples

言い方: 「「閉じるときに昔のテレビみたいに消して」」

なぜNG: 「昔のテレビ」だけでは、走査線を重ねる質感演出と勘違いされたり、単なるフェードアウトに縮小を足しただけのものが返ってくる。つぶれ切る線の細さと輝度の跳ね上げが無いと、この動きは成立しない。

言い方: 「「CRT power-offで閉じる。0.62sで、brightnessを2回明滅→scaleYで高さ0.6%まで潰しつつbrightness 3.5→scaleXで点にしてopacity 0。transform-origin center、transformのみでリフロー禁止、reduced-motionはフェードだけ」」

なぜOK: 3段の順番・各段の手段(scaleY / scaleX / brightness)・潰し切る値まで指定している。「transformのみ」の一言で、heightを縮めて周囲のレイアウトを動かす実装を防げる。