2026.07.22
transition:persist でDOMは残るが、CSSアニメーションはrestartする——seek-offsetで補正した話
Astroの transition:persist でナビゲーションDOMを保持しても、CSS keyframesは遷移のたびにrestartしてしまう。--bn-grow-offset というCSS変数でシーク補正した話。
tag
#CSS
「CSS」がついた記事 4 件。
-
-
2026.07.21
「にょきが見えない」から始まったFB反映3回と、AstroでSVGをset:htmlに逃がすとCSSスコープが死ぬ話
ボトムナビのタップ遷移演出「にょき」を実装した。3回のFBを経て完成した過程と、Astro の set:html が CSS スコープを壊す罠の話。
-
2026.07.18
スマホのカードが「押せる」に見えるまで — 案内ボックスUI、1日4往復
顧客クリニックのトップページに5つの案内ボックスを追加した。CMSの制約をJSで迂回し、1日4往復の修正を経て、最終的に「タッチできる」が視覚的に伝わる形になった。
-
2026.07.17
width !important が効かなかった理由は、flex-grow だった
フッターのボックスを中央寄せしたら幅が間延び。width !important を試し、JS インラインスタイルを試し、それでも 1000px のままだった。真因は flex-grow だった。