切り替える
変形（モーフ）Morph
同じ図形が、位置と大きさを変えながら次の画面へつながる。
AIへの指示例上の調整が入ります
スライド用（PowerPoint・Canva を操作するAIに）2枚のスライドで同じ図形の位置と大きさを変え、切り替えのときにその間をなめらかにつなぐ（変形）ようにしてください。長さは0.8秒で、始めと終わりがゆっくりになる（イーズインアウト）ようにしてください。
動画用（動画を作るAIや編集の依頼に）左上の小さな丸を、0.8秒で右の大きな角丸の四角へなめらかに形を変えながら移してください（モーフ）。位置・大きさ・角の丸みを同時に変え、速さの変わり方はイーズインアウト（ease-in-out）。
細かい指定動画を作る人・細かく指示したい人向け
- 長さ
- 0.8秒
- 速さの変わり方
- イーズインアウト（ease-in-out）
- 曲線の数値
- cubic-bezier(0.42, 0, 0.58, 1)
- 変えるもの
- 位置・幅・高さ・角の丸みを同時に（同じ図形を2つの状態の間でつなぐ）
HTML・CSS・JavaScriptWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
<div class="fb-morph"></div>
<button type="button" class="fb-go-next">次へ</button>
<script>
// 「次へ」を押したら形を変える。もう一度押すと元の形へなめらかに戻る
const shape = document.querySelector('.fb-morph');
document.querySelector('.fb-go-next').addEventListener('click', () => shape.classList.toggle('is-moved'));
</script>
<style>
.fb-morph {
width: 60px; height: 60px; border-radius: 50%;
background: #c25e1f;
/* 変わる4つを、同じ長さ・速さでつなぐ */
transition: width 0.8s ease-in-out, height 0.8s ease-in-out, border-radius 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.fb-morph.is-moved {
width: 220px; height: 120px; border-radius: 16px;
transform: translate(200px, 40px);
}
/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
.fb-morph { animation: none; transition: none; }
}
</style>
- どう動くか
- 2つの画面にある同じ図形を、位置・大きさ・形の間でなめらかにつなぎます。画面が切り替わったのではなく、図形が動いたように見えます。
- 使う場面
- 図の一部を拡大して説明するとき、流れのある説明、動画のロゴやアイコンの変化。
- やりすぎに注意
- 2つの画面で同じ図形（同じ名前の部品）を使うことが前提です。違う図形どうしでは、うまくつながりません。
