ディテールと演出 · 仕上げの小技
クリップパス裁剪路径
- クリーン
- 方向性
- 歯切れ良い
ある形で要素の見える部分を決め、それ以外は切り落とされたようになります。ワイプやリビールの定番手法です。
使いどころ
方向に沿って拭き出したり消したりしたいときに使います。要素自体の形を変えるだけなら「モーフ」のほうが簡単です。
パラメータ
clip-path: inset(0 0 100% 0)→inset(0) · 400ms ease-out
レシピ
クリップパス → clip-path inset(0 0 100% 0) → inset(0) @ 400ms ease-out
AI に渡す一文
この内容を clip-path でワイプ表示してください。inset(0 0 100% 0) から inset(0) へ、下から上に 400ms、ease-out で現します。