CSSを使用してアニメーションを使用してメニューを起動する

Feb 1, 2026

操作方法

それは私たちが世界を理解するアニメーションを通して：ドアスイングオープン、車の運転先への運転、唇は笑顔にカールされます。雷のような瞬間的なものでさえ、ベッドでそれを使用しながらあなたの顔に電話を落としているように、時間の経過とともに起こります。オブジェクトがどのように関連して機能するかを理解しているその動きを通して。それらが軽いか重い、硬い、または緩んで、接続された、または別々の、粘着性または滑りやすい場合。

しかし、Web上では、目の瞬きに現れて消えていることに慣れています。リンクをクリックすると、すべてが変わります。それは、盲目になっている部屋に導かれ、数回回転し、そして周囲を取り込むために目隠しを取り除くことができている。どのドアが入ったのかわかりません。これは、ほとんどのサイトがどのように構築されているかによって大きくなります。私たちはもっとうまくいくことができます。

の可能性について学ぶとき CSSアニメーション 、私たちの想像力がhyperriveに入ることができ、そしてすべてのことすべてにアニメーションを振りかけることができます。アニメーションは素晴らしいことができますが、私たちは注意して常に自分自身に尋ねる必要があります。このアニメーションは意味がありますか？それは美しいこと以外の値を追加していますか？それは私達の製品を使いやすくするのですか？

意味のあるアニメーション

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — これはチュートリアルの出発点です - アニメーションで表示されるサンプルメニュー

この記事では、私たちは共通の仕事をしています UIデザイン 要素：メニュー切り替え。私たちはCSSを使ってメニュー（そしてそれと一緒に行くアイコン）を作成します、そしてそれがアニメーションで生きてくるようにします。アニメーションが意味のあるものであることを確認しますが、できるだけ滑らかであることを確認するためにWebパフォーマンスのベストプラクティスを適用します。

あなたはできるここで最終結果をプレビューします。ユーザーがメニューアイコンをクリックすると、画面をカバーするためにアイコンの背景プレート（円）を展開し、メニューオーバーレイを表示します。

閉じるアイコンに点滅するだけでなく、閉じるアイコンを表すために、3つの垂直線（メニューアイコンを構成する）を「X」に動かしてモーフするつもりです。言い換えれば、メニューはアイコンモーフが閉じるボタンに明らかにされるように。

01.はじめに

By drawing the menu icon with CSS (and no images), we can easily animate it later — メニューアイコンをCSS（および画像なし）で描画することで、後で簡単にアニメートすることができます

プロジェクトファイルをダウンロードしてください。 open index.html ブラウザで、白い背景に対して3つの大きなリンクが表示されます。これが表示されるメニューオーバーレイです。

まず第一にそれを隠す必要があります。に styles.css. 、これらのスタイルを追加してください .menu-overlay. ：

不透明度：0;
可視性：隠された

オーバーレイが発生した状態で、ボタンが左上隅に表示されます。ここでメニューアイコンを描きましょう。アニメートを簡単にするために、HTMLとCSSのみを使用して描画します。ビットマップやベクトルはありません。私たちはすでにいくつかのHTMLを持っています index.html メニューの場合は、コンテナ（ 。メニュー ）、背景（ ○丸）、リンク（ .menu-link ）そしてアイコン（ .menu-icon 毎回1つのスパンで。

別の div 背景のためには、幾分異例のアプローチです。この円にアニメーションを追加したくない場合は、別のものを必要としません。 div ; Aを追加することができました 境界半径 そして私たちの メニューリンク 。

しかし、私たちは自由に使用したい 変わる 円の財産、それで私たちはアイコン自体に影響を与えることなくそれを拡大することができますので、アイコンから背景を切り離す必要があります。

アイコンを構成する行を描いて始めましょう。彼ら全員が共通しているのですか？それらは同様に広く、それらは丸みを帯びた角を持ち、絶対に配置されており、それらは背景色を持っています。すべての行が共有しているので メニューライン クラス、それを使用してこれらの共有プロパティを設定しましょう。

 .menu-line {
 背景色：＃333;
 高さ：2ピクセル。
 幅：100％。
 境界半径：2px;
 位置：絶対;
 左：0;

その後、線の固有のクラスを使用して垂直位置を設定できます。

 .menu-line-1 {top：0; }

.menu-line-2 {
 トップ：0;
 下：0;
 マージン：自動車;
}

.menu-line-3 {下：0;

02.ホバー効果を追加します

To make the menu appear clickable, we inflate the background plate on hover — メニューをクリック可能にするには、ホバーの背景プレートを膨張させる

ホバー効果を追加してアイコンをクリック可能にしましょう。に styles.css. 、新しいセレクタを作成します メニューサークル メニューの上にホバーするときにそれを拡大縮小するには：

 .menu：hover .menu-circle {変換：scale（1.4）;

今私達は私達の最初のアニメーションを追加することができます。追加 「移行：すべて0.2S簡易アウト」 に .menu-circle {} （ホバー状態にはありません）。変更可能なすべてのプロパティをアニメートするようにブラウザに言う ○丸。そのため、ホバーに拡張すると、その新しい状態に0.2秒のコースを超え、タイミング機能があります。 安らぎの 。

どのタイミング機能をどのタイミング機能を知っていますか。まず第一に、線形タイミング関数を使用しないでください。現実の世界のものは完全に一定の速度で動くことが多く、線形のタイミング機能でアニメ化されたオブジェクトは不自然で硬いのが（アインシュタインが言ったように、神は線形タイミング機能でサイコロを演奏しません）。

経験則として、 安らぎの 新しいオブジェクトを提示するのに最適な作品 安らぎ オブジェクトを削除するのに最適に機能します。そして疑問があるとき、 安らぎの デフォルトのソリッドタイミング関数は、遅い始まりとゆっくりとした終わりを持ち、滑らかで流動性のアニメーションを作成します。

03.メニューを表示して非表示にします

jQueryを使って、新しく作成されたオーバーレイを表示して非表示にしましょう。に script.js. 、のクラスを切り替えます 開いた オン .menu-overlay. 既存のクリックハンドラの中にあります。

  $（ "＃menu-overlay"）。TOGGLECLASS（「オープン」）;

その後、オープンのクラスがあるときにオーバーレイを表示します。

 .menu-overlay.open {
 不透明度：1;
 可視性：目に見える。

04.メニューアイコンを接続してください

以前に追加した遷移は、オーバーレイを表示して非表示にすると、すでにきれいなフェード効果があります。ただし、メニューアイコンの背景がメニューのオーバーレイになるように見えるようにすることができ、2つの2つを視覚的に接続します。

この効果を達成することは、それが見えるよりも簡単です。クリックする必要があるのは、クリックしたときにメニューサークルを素早く拡大することです。オーバーレイは同時にフェードされ、メニューアイコンがオーバーレイに変換されている錯覚を作成します。

メニューがクリックされたときにメニューの円をスタイル化できる必要があります。 open script.js. 既存のクリック機能の内側には、クラスを開くことができます。 。メニュー ：

  $（ "。メニュー"）。TogGleclass（ "Open"）;

これで、このクラスをCSSでターゲットにして、メニューが開かれたときに円を展開できます。の最下位に Style.css. 、展開する ○丸いつ 。メニュー クラスもあります 。開いた ：

 .menu.pen .menu-circle {変換：スケール（60）;

05.アイコンを変換します

The white circle expands to become the menu background, and the icon morphs into an 'X' — ホワイトサークルはメニューの背景になるように展開し、アイコンモーフは 'x'にモーフ

私たちは私たちのメニューに美しい明らかな効果を得ましたが、メニューのアイコンを閉じるアイコンにする方法はどうですか？あなたがどのようにして知っていたら驚くほど簡単です - 私たちは3つのCSSプロパティを設定するだけです。まず、メニューが表示されている間、中央の回線を隠す必要があります。

 .menu.open .menu-line-2 {不透明度：0;

それから、私たちがする必要があるすべての2行を反対方向に45度反転します（ラインは異なる方向を指す必要があります。

 .menu.open .menu-line-1 {
 変換：回転（-45DEG）。
}

.menu.open .menu-line-3 {
 変換：回転（45deg）;

よく、私達はまたこれら2つの線を垂直に中心にする必要があります。この時点であなたは「簡単」を考えていることができました！変更する必要があります上そして bottom それらを中心にする位置。そしてあなたは正しくなるでしょう - 私たちがこのアイコンをアニメートしていなかったら。

アニメーションに制限することによってハードウェアアクセラレーションアニメーションのみを達成することができるので 変わる そして 不透明度 プロパティ、トランスフォームを介して線をセンタリングすることにリゾートする必要があります。

 .menu.open .menu-line-1 {
 変換：Translatey（7px）Translatey（-50％）回転（-45DEG）。
}

.menu.open .menu-line-3 {
 変換：translatey（-7px）Translatey（50％）回転（45deg）。

これらの変換は2行を移動してアイコンコンテナ内を垂直中心に集中してから、それらを回転させてクロスを形成します。

それを壊しましょう。同時に使用されている2つの翻訳があります。 翻訳（7px） そして 翻訳（-50％） 。最初の変換 翻訳（7px） 、ラインの上端をキャンバスの垂直中央に移動するために使用されます。ここでの数学は簡単です：14は私たちのアイコンの高さです.2つから分割することによって、私たちは中点を得る：7。

2番目の変換 翻訳（-50％） 上端の垂直中心がキャンバスの垂直中心点にあるように、線を動かすために使用されます。

通常使用するとき％ CSS要素の親を参照してください（設定 幅：100％ 要素の幅とその親の幅と一致させますが、Fromformプロパティでパーセンテージを使用する場合は、要素自体を参照してください。それで、私たちが線の高さを見つけてそれ以上上に移動するために、私たちが必要とするのはすべてです 翻訳（-50％） 。

06.アイコン間のモーフ

メニューアイコンを閉じるアイコンに置き換えるのではなく、2つの状態間のモーフをしましょう。

遷移を追加することから始めます .menu-line に Style.css. ：

遷移：全て0.25Sの容易さ;

Ta-Da！モーフィングメニューのアイコン。しかし、アニメーションは少し鈍いです。それを修正しましょう。線をより鮮やかにするようにするために、それらをさらに90度回転させることができます。アイコンは最後に同じように見えますが、行は同じ期間中にさらに移動します。回転を変える 回転（-135DEG） そして 回転（135DEG） 。

経験則として、アニメーションに適したカスタムベジエ曲線を使用して、常にアニメーションを改善することができます。私たちは現在使用しています 安らぎの - これは、アニメーションが途中でより速いペースで遅い開始と終了を持つことを意味します。

私たちのアイコンのためにもっと春の効果がフィットしていると思います。それが最後になるにつれて小さなバウンス効果を持つ、速く回転させましょう。ために .menu-line 、交換する 簡単に カスタムベジエ曲線で：

遷移：全て0.25S立方-BZIER（0.175,0.885,0.32,1.275）;

これらすべての数字は何ですか？心配しないでください：ベジエ曲線はめったに手で書かれていません。あなたが使う キュービックベジエ（） 時間の経過とともにアニメーションのペースを定義するには、それらを自分で書くのではなく、参照サイトを使用することをお勧めします。これはeasings.netから来ています。アニメーションの最後にオーバーシュートし、微妙なバウンス効果を作成します。

私たちがそれに参加している間、に行きます easings.net そしてコードをつかみます easeoutexpo 。これを使用して、メニューの背景アニメーションにもっと洗練された効果を描きます。の遷移を更新します ○丸このカスタムベジエ曲線を使用し、アニメーションを少し長くする（0.5秒）。

遷移：全ての0.5S立方ベジエ（0.19,1,0.22,1）;

おめでとうございます、あなたは意味のあるアニメーションを作成しました。その上に、アニメーションはスムーズに実行されます。

変換と不透明度のプロパティをアニメートするだけで、ブラウザのハードウェアアクセラレーションサポートが蹴り、不要な遅れを避けることができます。アニメーションで遊ぶときは、あなたがこれらの2つのボックスをチェックすることを確認してください。

この記事は最初に登場しました ネットマガジン 問題281。 ここでネットを購読する 。

関連記事：

CSS3アニメーションの10印象的な例
28 CSSの優れた例
Webアクセシビリティを始めましょう

CSSを使用してアニメーションを使用してメニューを起動する

意味のあるアニメーション

関連要素

01.はじめに

02.ホバー効果を追加します

03.メニューを表示して非表示にします

04.メニューアイコンを接続してください

05.アイコンを変換します

06.アイコン間のモーフ

操作方法 - 最も人気のある記事

ブルマを使い始める

猫を描く方法

ターミネータラインとは何ですか？

モデリングをスピードアップするための6つの方法

スケーラブルな応答コンポーネントを構築する

より没入型のVR経験を作成するための5つの方法

表現上の手を塗るための上のヒント

冬季環境を作成する方法

カテゴリ