グローバルナビ等を格納するときに表示する「メニューボタン」
表示・非表示にアニメーションを追加してちょっとリッチ見せるためのサンプル集です。
サンプルの「Result」に表示されているボタンをクリックすると実際のアニメーションを確認することができます。
上下のラインの交差
See the Pen menu button animations 1 by hirano (@_y_hirano) on CodePen.
上下のラインが「×」の形に変形ます。
真ん中の線はふんわりとフェードアウトします。
上下のラインがクルっと回転
See the Pen Untitled by hirano (@_y_hirano) on CodePen.
上下のラインがクルっと素早く回りながら「×」の形に変形ます。
真ん中の線はふんわりとフェードアウトします。
ボタン自体を回転させながら変形
See the Pen menu button animations 3 by hirano (@_y_hirano) on CodePen.
ボタン全体が素早く回転しながら「×」の形に変形します。
1本線に集合してから変形
See the Pen menu button animations 4 by hirano (@_y_hirano) on CodePen.
3本の線を中心に集めて1本の線にしてから「×」の形に変形します。
