• 出現
  • 画像の出現

#image appear 018

画像の中心から円→四角に形が変化して出現

参考サイトURL
動きの解説

円形のマスクで現れた画像が、徐々に角張って四角い全画面表示になる動きは、柔らかい導入からしっかりとした情報提示への切り替えをスムーズに行います。アイリスワイプのような場面転換効果があり、視線を中央に集めてから全体へ拡散させます。CSSのclip-pathプロパティで、circle()からinset(0)への遷移を設定します。角丸(border-radius)の変化も組み合わせると、より有機的で滑らかな変形になります。