Morph
モーフ
どんな動き？
border-radiusをアニメーションさせることで、四角い図形が滑らかに円形に近い形へ、また元の形へと変化を繰り返すアニメーション。シンプルな図形変化ながら有機的な動きを演出でき、アイコンの背景や装飾パーツ、ローディング表現などに使われる。
よく使う場所
アイコン背景装飾パーツローディング表現ボタン背景
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Continuously morph a shape between a rounded square and a circle using border-radius.Trigger:
Continuous, starts automatically and loops.
Initial state:
border-radius: 18% (rounded square)
Animation:
border-radius smoothly interpolates toward 50% (circle) and back.
Final state:
Returns to border-radius: 18%, repeating indefinitely.
Timing:
duration: 2.4s per cycle
easing: ease-in-out
iteration: infinite実装方法の候補
この動きは以下の技術で実装できます。
CSS (border-radius)GSAP MorphSVGPluginFlubber.js
別名・関連ワード
Shape MorphBorder Radius Morph